Question

我在某些路线上使用了登录保护（例如'/ profile'）。看起来像这样：

canActivate() {
    if (this.user.islogin) return true;
    this.router.navigate(['']);
}

如果用户未登录并尝试访问某些路径，则会将用户重定向到主页面。它工作正常。用户可以从任何页面注销。我希望我的应用程序有下一个行为：如果用户在“/ profile”页面上并单击“注销”，则应通过canActivate（）方法将其重定向到主页面。但是在这种情况下不调用此方法。我该怎么做才能运行canActivate（）（重新加载页面，手动调用）？我的注销方法：

logout() {
    localStorage.removeItem('auth_token');
    this.islogin = false;
}

我尝试将this.router.navigate([this.router.url]);添加到logout方法，但结果是一样的。只有当我重新加载页面时，angular2才会重定向我。什么是正确的方法？

Answer 1

考虑到您的警卫只使用islogin并且您在用户注销时将其设置为false，最简单的方法是在注销时重定向：

logout() {
    localStorage.removeItem('auth_token');
    this.islogin = false;
    this.router.navigate(['']);    <---- ADD THIS
}

如果你想在canActivate()中重用逻辑而不先改变路线，你可以这样做：

首先，在logout()所在的地方注入服务：

constructor(
    private router: Router,
    private route: ActivatedRoute,
    private canActivateGuard: CanActivateGuard) {}

（只需使用您使用的名称代替CanActivateGuard）

接下来，在logout()中调用它：

logout() {
    this.canActivateGuard.canActivate(
        this.route.snapshot,
        this.router.routerState.snapshot);
}

Answer 2

问题很旧，但问题是最新的。

在Angular v6中，您可以设置路由器的onSameUrlNavigation属性：

RouterModule.forRoot(routes, {
    ...
    onSameUrlNavigation: 'reload'
})

并在需要的地方设置runGuardsAndResolvers

{
    path: '',
    component: AccountComponent,
    canActivate: [AuthGuard],
    runGuardsAndResolvers: 'always'
}

在您的注销方法中，只需调用相同的路由，就会触发身份验证防护的canActivate方法：

signout(): void {
    this.store.dispatch({
        type: AuthActionTypes.Signout
    });
    // Navigate to the same url to invoke canActivate method
    // in routes with runGuardsAndResolvers.
    // Also activated onSameUrlNavigation router property.
    this.router.navigate([this.auth.redirectUrl]);
}

在上面的示例中，redirectUrl是用于保存当前网址的属性。

Answer 3

尽管我遇到了一个老问题，但我只是使用 async and await

解决了这个问题

我正在通过 AngularFireAuth

将 Firebase身份验证与 Angular

当我使用以下代码时：

  logout(){
    this.fbAuthService.fbSignOut();
    this.router.navigate(['/login']);
  }

用户已正确注销，但 this.router.navigate（['/ login']） 无效！如果我重新加载页面，它将起作用。

稍后，我怀疑我可能需要等待才能完成退出过程，然后致电 this.router.navigate（['/ login']） ）功能。

所以我将其更改为：

  async logout(){
    await this.fbAuthService.fbSignOut();
    this.router.navigate(['/login']);
  }

它就像一种魅力！希望它对可能偶然发现此问题的人有所帮助。

注销后Angular2路由器可以激活

3 个答案: