Angular2卫士和路由器

问题描述：

我有一个登录系统，当且仅当我们登录时，才能访问模块。如果我们不是，并且会话已过期，那么我会重定向到登录页面，并保存会话存储我们所在的页面，因此如果用户尝试再次登录，他会回到他所在的页面。但是，我有我的后卫一个问题：Angular2卫士和路由器

@Injectable() 
export class AuthGuard implements CanActivate { 
    constructor(private _router: Router, private _authUtils: AuthUtils) {} 

    canActivate(): boolean { 
    if(this._authUtils.isLogged()) { 
     return true 
    } 
    else { 
     window.sessionStorage.setItem('previousPage', this._router.url) 
     let link = ["/login", { previous: "true" }] 
     this._router.navigate(link) 
     return false 
    } 
    } 
}

问题来自于一个事实，即this._router.url尚未初始化，因此“/”每次都返回。如果我强迫它等于我的路线路径之一，那么它工作得很好。任何想法如何解决这个问题？

干杯！

编辑：

以下是我在我的应用程序，routing.module.ts：

@NgModule({ 
    imports: [ 
     RouterModule.forRoot([ 
       { 
        path: 'myApp', 
        loadChildren: 'app/myApp.module#MyAppModule', 
        canActivate: [AuthGuard] 
       }, 
       { 
        path: 'login', 
        component: LoginComponent, 
        data: { 
         name: 'login' 
        } 
       }, 
       { 
        path: '**', 
        redirectTo: '/login', 
        pathMatch: 'full' 
       } 
      ] 
     ) 
    ], 
    exports: [ 
     RouterModule 
    ] 
}) 

export class AppRoutingModule {}

请您app.module，你宣布你AuthGuard添加代码。 – Maxime

你想在那看到什么，我的意思是它出现在我的提供者中：as：AuthGuard – Scipion

答

你可以使用RouterStateSnapshot从canActivate paramater得到当前的URL。

示例Plunker。

所以，我认为你可以改变你的AuthGuard到：

import { 
    ActivatedRouteSnapshot, 
    RouterStateSnapshot, 
    CanActivate 
} from '@angular/router'; 

// other import .... 

@Injectable() 
export class AuthGuard implements CanActivate { 
    constructor(private _router: Router, private _authUtils: AuthUtils) {} 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
    if(this._authUtils.isLogged()) { 
     return true 
    } 
    else { 
     window.sessionStorage.setItem('previousPage', state.url) 
     let link = ["/login", { previous: "true" }] 
     this._router.navigate(link) 
     return false 
    } 
    } 
}

Angular2卫士和路由器

相关推荐