Angular Nrwl Nx路由守卫问题：无请求页面未拦截，需未认证跳登录

你遇到的核心问题是：配置的canActivate守卫未在页面无HTTP请求时生效，导致未认证用户仍能访问受保护路由。结合你的代码，主要问题及修复方案如下：

1. 紧急修复：路由跳转拼写错误 #

你的登录路由路径是authentification，但守卫代码中跳转路径拼写错误：

// 错误写法：少了字母'e'
this.router.navigate(['/authtentification']);
// 正确写法
this.router.navigate(['/authentification']);

这个拼写错误会导致跳转失败，看起来像是守卫未生效，实际是跳转目标路由不存在。

2. 完善守卫的错误处理逻辑 #

当前守卫仅处理了accountService.identity()成功返回的情况，未处理请求失败（如网络错误、接口500）的场景，会导致守卫卡住，路由直接放行：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.accountService.identity().pipe(
      map(account => {
        if (account) {
          const authorities = route.data['authorities'];

          if (!authorities || authorities.length === 0 || this.accountService.hasAnyAuthority(authorities)) {
            return true;
          }

          if (isDevMode()) {
            console.error('User has not any of required authorities: ', authorities);
          }
          this.router.navigate(['accessdenied']);
          return false;
        }
        this.stateStorageService.storeUrl(state.url);
        this.router.navigate(['/authentification']); // 已修复拼写错误
        return false;
      }),
      // 添加错误处理，覆盖请求失败场景
      catchError(() => {
        this.stateStorageService.storeUrl(state.url);
        this.router.navigate(['/authentification']);
        return of(false);
      })
    );
  }

3. 确保守卫覆盖所有受保护路由 #

如果你的DashboardModule包含子路由，仅在父路由配置canActivate可能无法完全覆盖所有子路由，建议添加canActivateChild确保子路由也被守卫：

{
    path: 'dashboard',
    loadChildren: () => import('@ditib-emc-medaris/dashboard').then((m) => m.DashboardModule ),
    canActivate: [UserRouteAccessService],
    canActivateChild: [UserRouteAccessService] // 守卫所有子路由
  },

4. 验证accountService.identity()逻辑 #

确保identity()方法不会处于永久pending状态：

• 优先返回本地缓存的用户信息
• 接口请求失败时明确返回null，而非抛出错误
  示例实现：

identity(): Observable<User | null> {
    // 先读取本地缓存
    const cachedUser = localStorage.getItem('user');
    if (cachedUser) {
      return of(JSON.parse(cachedUser));
    }
    // 调用后端接口，失败时返回null
    return this.http.get<User>('/api/account').pipe(
      tap(user => localStorage.setItem('user', JSON.stringify(user))),
      catchError(() => of(null))
    );
  }

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