如何配置Angular路由AuthGuard仅拦截父路由不影响子路由访问

该需求完全可以实现。你当前遇到的拦截问题是Angular路由的默认特性导致的：父路由配置的canActivate守卫会作用于所有子孙路由，访问任意子路由时都会先执行父路由的守卫逻辑，因此登录页也会被拦截。

方案1：路由结构拆分（推荐） #

把需要守卫的父路由默认内容拆分到空子路由，父路由本身不配置守卫，仅给需要拦截的子路由加守卫即可，调整后的路由配置如下：

const routes: Routes = [
  {path: "", component: TirageComponent},
  {path: "tirage", redirectTo: ""},
  {path: "historique", component: HistoriqueComponent},
  // 父路由移除canActivate配置
  {path: "liste", children: [
    // 登录页子路由无守卫，可直接访问
    {path: "login", component: AuthComponent},
    // 空子路由对应原ListeComponent，单独加守卫
    {path: "", component: ListeComponent, canActivate: [AuthGuard]}
  ]},
  {path: "**", redirectTo: "tirage"}, 
];

该方案的效果：

• 访问/liste时，匹配到空子路由，触发AuthGuard拦截，符合权限要求
• 访问/liste/login时，匹配到login子路由，不会触发守卫，可正常打开登录页
• 后续新增/liste下的权限子路由时，只需给对应子路由加canActivate: [AuthGuard]即可，逻辑清晰解耦

方案2：守卫内判断路径 #

如果不想调整路由结构，也可以直接在AuthGuard的实现逻辑里判断当前访问路径，是登录页就直接放行，核心代码如下：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree {
  // 访问登录页直接放行
  if (state.url === '/liste/login') {
    return true;
  }
  // 原有权限校验逻辑
  // ...
}

该方案改造成本低，但守卫逻辑和路由路径耦合，后续如果修改登录页路径需要同步修改守卫代码，维护成本更高，仅适合临时快速修复。

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