带有路由的 Angular Auth 保护无限循环 - 如何修复它？

Question

我的身份验证保护逻辑和路由有问题。

我的app-routing.module.ts 中有 3 条路线：

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./browse/browse.module').then(m => m.BrowseModule),
  },
  {
    path: AppRoutes.auth,
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
  },
  {
    path: AppRoutes.landing,
    loadChildren: () => import('./landing/landing.module').then(m => m.LandingModule),
  },
];

如您所见，有 1 条路径包含''并将用户发送到那里BrowserModule--/browser路径

在browser-routing.module.tsI have 中AuthGuard，landing如果用户未登录，则将用户发送到页面：

const routes: Routes = [
  {
    path: '',
    component: BrowseComponent,
    redirectTo: BrowseRoutes.browse,
  },
  {
    path: BrowseRoutes.browse,
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
    canActivate: [AuthGuard]
  }
];

AuthGuard.ts :

  canActivate(
    route: ActivatedRouteSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    if (this.authService.hasToken()) {
        if(this.authService.isAuthenticated()){
          console.log('logged in guard');
          this.router.navigate(['browse']);
            return true;
        } else {
          console.log('not logged in guard');
            this.router.navigate(['landing']);
            return false;
        }
    } else {
      console.log('no token not logged in guard');
      this.router.navigate(['landing']);
      return false;
    }


  }

问题是：

如果我登录了，它会infinity loop用AuthGuard，打印我“未登录”并进入“ /”然后/browse一次又一次地“ ”然后再次logged in进入infinity pool。如何解决？

Answer 1

有没有必要在条件从后卫导航被满足。这使得守卫覆盖它不应该负责的决定，并使其无法重用于其他路由，因为它总是导航到/browse. 警卫人员的工作是验证并在条件应该只浏览不满足。
您的canActivate方法应具有以下结构：

if (isLoggedIn()) {
  return true;
}
this.router.navigate(['landing']);
return false;