Question

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

@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尚未初始化，因此每次都返回'/'。如果我强迫它等于我的一条路线，那么它的效果非常好。任何想法我怎么能解决这个问题？

干杯！

编辑：

以下是我在app-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 {}

Answer 1

您可以使用RouterStateSnapshot参数中的canActivate获取当前网址。

示例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 Guards和路由器

1 个答案: