Angular 5嵌套路由Guard不生效：为何需逐个路由添加守卫？

嘿，这个问题我之前帮好几个开发者梳理过，其实不是你操作出错了，这完全是Angular路由守卫的默认机制导致的！

为什么父路由的守卫管不到懒加载子路由？ #

主要有两个核心原因：

• 懒加载模块的独立性：懒加载的模块是独立编译、独立加载的，它的路由配置并不在主路由数组的children里，而是属于单独的路由分支。Angular不会自动把父路由的守卫“继承”给这种独立加载的子路由模块——毕竟懒加载模块在首次访问前甚至都不存在于应用中，父路由的守卫自然没法提前关联到它。
• canActivate的作用范围：你之前用的canActivate守卫，只会作用于当前路由本身，不会递归作用于它的子路由（尤其是懒加载的子路由）。当你直接访问懒加载子路由时，Angular只会验证父路由的canActivate（如果父路由配置了的话），但子路由本身没有守卫的话就直接放行，所以你会发现守卫没触发。

怎么解决不用每个路由都加守卫的问题？ #

给你两个最实用的方案：

方案1：用canActivateChild代替canActivate #

这是最省心的方式！把父路由上的canActivate换成canActivateChild，它会作用于该路由下的所有子路由（包括懒加载的），每次激活子路由前都会触发守卫检查。

比如在app.routing.ts里这么配置：

const routes: Routes = [
  {
    path: 'main',
    canActivateChild: [你的权限守卫服务], // 替换成你的Guard
    loadChildren: () => import('./main/main.module').then(m => m.MainModule)
  }
];

这样一来，main模块下的所有子路由，不管是直接访问还是通过导航进入，都会经过守卫的权限校验，不用在main.routing.ts里重复配置了。

方案2：在懒加载模块的根路由上统一加守卫 #

如果不想修改主路由配置，也可以在懒加载模块的路由数组里，给它的根路由添加守卫，这样它下面的所有子路由都会继承这个守卫。

比如main.routing.ts里：

const routes: Routes = [
  {
    path: '',
    canActivate: [你的权限守卫服务],
    children: [
      // 这里的所有子路由都会继承根路由的守卫
      { path: 'dashboard', component: DashboardComponent },
      { path: 'settings', component: SettingsComponent }
    ]
  }
];

这样只要访问main下的任何子路由，都会先触发根路由的守卫检查，不用给每个子路由单独加。

补充：为什么之前调试没进入守卫？ #

如果你之前用的是canActivate配置在父路由，那只有当你直接访问父路由（比如/main）时才会触发守卫；但如果直接访问子路由（比如/main/dashboard），Angular只会确认父路由的路径存在，但不会触发父路由的canActivate去校验子路由的访问权限——这就是你调试时没进入守卫代码的原因。

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