Angular登出状态访问根路径未自动跳转登录页问题求助

问题原因 #

1. 所有需要鉴权的业务路由（/keeper、/admin、/provider-data等）未配置路由守卫，路由跳转时不会校验登录状态，未登录用户也能直接进入业务页面
2. HTTP拦截器的重定向逻辑仅在接口返回401状态码时触发，路由跳转优先级高于接口请求，未登录时页面会先渲染业务页面，等到接口返回401才会触发跳转，导致你先看到权限错误提示
3. 部分配置可能缺失：如果HTTP拦截器未在AppModule中注册，相关逻辑根本不会执行
4. 根路径默认直接重定向到/keeper，未做登录状态前置校验

解决方案 #

1. 给业务路由增加鉴权守卫 #

你已经在auth-routing.module中定义了权限校验逻辑，首先完善校验规则，增加未登录时的跳转逻辑，再关联到所有需要鉴权的路由：

// auth-routing.module.ts 中修改hasClaimPipe，注入Router
import { Router } from '@angular/router';

const hasClaimPipe: (claim?: string) => AuthPipe =
  (claim) => pipe(
    customClaims,
    map((claims) => {
      // 未登录直接跳转到登录页
      if (!claims) {
        return this.router.parseUrl('/auth/login');
      }
      // 不传权限参数时只要登录即可访问
      if (!claim) {
        return true;
      }
      // 校验对应权限
      return claims?.role === claim;
    })
  );

// 新增通用登录守卫，只要登录就可访问，不需要特定权限
export const loginRequired = () => hasClaimPipe();

然后在app-routing.module.ts中给业务路由绑定守卫：

import { AngularFireAuthGuard } from '@angular/fire/auth-guard';
import { loginRequired, newAdminOnly } from './auth/auth-routing.module'; // 导入你定义的守卫

const routes: Routes = [
  { path: '', redirectTo: 'keeper', pathMatch: 'full' },
  {
    path: 'keeper',
    component: DefaultLayoutComponent,
    canActivate: [AngularFireAuthGuard], // 绑定守卫
    data: { authGuardPipe: loginRequired }, // 用登录即可的校验规则
    children: [/* 原有子路由不变 */]
  },
  {
    path: 'admin',
    component: AdminLayoutComponent,
    canActivate: [AngularFireAuthGuard],
    data: { authGuardPipe: newAdminOnly }, // 用admin权限校验规则
    children: [/* 原有子路由不变 */]
  },
  // provider-data路由同理加对应的守卫规则
  { path: 'auth', loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule) }
];

2. 确认HTTP拦截器已注册 #

在AppModule的providers数组中添加拦截器配置，确保拦截逻辑生效：

// app.module.ts
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpTokenInterceptor } from './http-token-interceptor.ts';

@NgModule({
  // ...其他配置
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: HttpTokenInterceptor, multi: true }
  ]
})
export class AppModule { }

3. 清理冗余路由配置 #

你当前/keeper路由下存在两个重复加载CaregiversModule的配置（path:''和path:'caregivers'），删掉其中一个避免路由冲突。

4. 增加全局登录状态监听（可选优化） #

在AppComponent中监听Firebase Auth的登录状态，一旦检测到用户登出直接跳转登录页，做双重保障：

// app.component.ts
import { AngularFireAuth } from '@angular/fire/auth';
import { Router } from '@angular/router';

export class AppComponent {
  constructor(private auth: AngularFireAuth, private router: Router) {
    this.auth.authState.subscribe(user => {
      if (!user) {
        this.router.navigate(['/auth/login']);
      }
    })
  }
}

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