使用多个Angular守卫导致页面崩溃问题求助

问题 #

尝试为不同页面配置独立的Angular守卫，通过布尔参数判断用户是否登录。以下是两个守卫的代码：

IsAuthenticatedGuard #

export class IsAuthenticatedGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router){}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return this.authService.isLoggedIn$.pipe(
      tap(isLoggedIn => {
        if(!isLoggedIn){
          //redirect
          this.router.navigate(['login']);
        }
      })
    );
  }
}

LoginPageGuard #

export class LoginPageGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router){}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return this.authService.isLoggedIn$.pipe(
      tap(isLoggedIn => {
        if(isLoggedIn){
          //redirect
          this.router.navigate(['overview-page']);
        }
      })
    );
  }
}

路由配置（app.module.ts） #

HttpClientModule,
RouterModule.forRoot([
  //{path: '', component: UserTargetsComponent },
  //{path: '', component: NavbarComponent },
  {path: '', component: OverviewPageComponent, canActivate: [IsAuthenticatedGuard]},
  {path: 'overview-page', component: OverviewPageComponent, canActivate:[IsAuthenticatedGuard]},
  {path: 'login', component: LoginComponent, canActivate: [LoginPageGuard]},
  {path: '**', component: NotFoundComponent, canActivate: [IsAuthenticatedGuard]}
])

起初功能符合预期：已登录用户无法访问登录页，会跳转至概览页；未登录用户则相反。但现在页面无响应，手动输入登录页或概览页地址均跳转至主页，多次尝试后页面崩溃。移除登录页的canActivate守卫后恢复正常，请问问题原因及解决办法？

问题原因 #

1. 守卫返回值逻辑缺失：两个守卫仅在tap操作符中执行路由跳转，但未向Angular路由系统返回明确的授权结果（true或UrlTree）。路由系统会一直等待守卫的返回值，导致页面无响应，甚至触发无限路由循环。
2. 重复路由触发循环：若isLoggedIn$是持续发射值的数据流（如BehaviorSubject），守卫会反复响应状态变化，不断触发跳转逻辑。比如已登录用户访问登录页时，LoginPageGuard跳转到overview-page，而overview-page的IsAuthenticatedGuard又会检查登录状态，反复触发的跳转最终导致页面崩溃。

解决办法 #

1. 修正守卫返回值逻辑 #

用map替代tap操作符，直接返回授权结果：当需要跳转时返回UrlTree（路由系统会自动处理跳转），允许访问时返回true。

修改后的IsAuthenticatedGuard

export class IsAuthenticatedGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router){}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return this.authService.isLoggedIn$.pipe(
      map(isLoggedIn => {
        if(!isLoggedIn){
          return this.router.createUrlTree(['login']);
        }
        return true;
      })
    );
  }
}

修改后的LoginPageGuard

export class LoginPageGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router){}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return this.authService.isLoggedIn$.pipe(
      map(isLoggedIn => {
        if(isLoggedIn){
          return this.router.createUrlTree(['overview-page']);
        }
        return true;
      })
    );
  }
}

2. 避免重复触发守卫逻辑（可选优化） #

如果isLoggedIn$是持续发射值的数据流，添加take(1)确保守卫仅获取一次当前状态，避免反复触发：

// 在map之前添加take(1)
take(1),
map(...)

3. 优化路由配置（可选） #

将空路径''设置为重定向到overview-page，减少重复路由配置：

RouterModule.forRoot([
  {path: '', redirectTo: 'overview-page', pathMatch: 'full'},
  {path: 'overview-page', component: OverviewPageComponent, canActivate:[IsAuthenticatedGuard]},
  {path: 'login', component: LoginComponent, canActivate: [LoginPageGuard]},
  {path: '**', component: NotFoundComponent, canActivate: [IsAuthenticatedGuard]}
])

内容的提问来源于stack exchange，提问作者emreertunc