Angular中如何为所有子路由应用路由守卫，排除指定路由？

嘿，这个场景我之前开发Angular项目时也碰到过，其实有两个挺简洁的方案能解决，我给你详细说说：

方案一：用 canActivateChild 精准控制子路由权限 #

这是最直观的方式，把父路由的守卫从 canActivate 换成 canActivateChild，这样守卫只会作用于你指定的子路由，而非默认覆盖所有子路由：

1. 调整父路由配置，移除 canActivate，添加 canActivateChild 并绑定你的权限守卫（比如 AuthGuard）：

const routes: Routes = [
  {
    path: 'my-account',
    component: MyAccountComponent,
    canActivateChild: [AuthGuard], // 仅作用于需要保护的子路由
    children: [
      // 需要登录才能访问的子路由
      { path: 'profile', component: ProfileComponent },
      { path: 'orders', component: OrdersComponent },
      // 公开访问的子路由，不受守卫限制
      { path: 'help', component: HelpComponent }
    ]
  }
];

2. 确保你的守卫实现 CanActivateChild 接口（其实和 CanActivate 的校验逻辑基本一致，只需复用现有逻辑即可）：

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate, CanActivateChild {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return this.checkLoginStatus(state.url);
  }

  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return this.checkLoginStatus(state.url); // 复用同一份登录校验逻辑
  }

  private checkLoginStatus(targetUrl: string): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    }
    // 未登录则跳转登录页，记录当前URL方便登录后返回
    this.router.navigate(['/login'], { queryParams: { returnUrl: targetUrl } });
    return false;
  }
}

这样配置后，my-account/help 不会触发权限校验，未登录用户可直接访问，其他子路由依然受保护。

方案二：通过路由 data 标记公开路由，在守卫中动态判断 #

如果不想改动原有父路由的守卫配置（比如已经用了 canActivate），可以给公开子路由加一个自定义标记，然后在守卫里判断是否跳过校验：

1. 在路由配置中，给公开子路由添加 data: { public: true } 标记：

const routes: Routes = [
  {
    path: 'my-account',
    component: MyAccountComponent,
    canActivate: [AuthGuard], // 父路由守卫默认作用于所有子路由
    children: [
      { path: 'profile', component: ProfileComponent },
      { path: 'orders', component: OrdersComponent },
      // 标记为公开访问的路由
      { path: 'help', component: HelpComponent, data: { public: true } }
    ]
  }
];

2. 修改守卫逻辑，先检查当前路由（或其祖先路由）是否有公开标记，有则直接放行：

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 递归检查当前路由及所有父路由是否有公开标记
    const isPublicRoute = this.checkIfPublic(route);
    if (isPublicRoute) {
      return true;
    }

    // 正常的登录校验逻辑
    if (this.authService.isLoggedIn()) {
      return true;
    }
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
    return false;
  }

  private checkIfPublic(route: ActivatedRouteSnapshot): boolean {
    if (route.data?.public) {
      return true;
    }
    // 递归检查父路由
    return route.parent ? this.checkIfPublic(route.parent) : false;
  }
}

这个方案无需改动原有守卫的绑定方式，只需给目标路由加个标记即可，灵活性更高。

两种方案都很简洁，你可以根据现有代码结构选择：新路由配置推荐方案一，逻辑更清晰；已有父路由守卫的场景选方案二更省事。

内容的提问来源于stack exchange，提问作者A. Duff