使用无组件路径CanActivate与CanActivateChild

Question

关于Route Guards的angular2文档让我不清楚什么时候使用CanActivate防护装置和CanActivateChild防护装置以及无装配路线.

TL; DR: 什么是在具有点canActivateChild时,我可以用一个无部件与航线canActivate达到同样的效果呢？

长版:

我们可以在路由层次结构的每个级别都有多个防护.路由器首先检查CanDeactivate和CanActivateChild防护,从最深的子路由到顶部.然后它从上到下检查CanActivate警卫到最深的子路线.

我得到的CanActivateChild是自下而上CanActivate检查并自上而下检查.对我来说没有意义的是文档中给出的以下示例:

@NgModule({    
  imports: [
    RouterModule.forChild([
      {
        path: 'admin',
        component: AdminComponent,
        canActivate: [AuthGuard],
        children: [
          {
            path: '',
            canActivateChild: [AuthGuard],
            children: [
              { path: 'crises', component: ManageCrisesComponent },
              { path: 'heroes', component: ManageHeroesComponent },
              { path: '', component: AdminDashboardComponent }
            ]
          }
        ]
      }
    ])
  ],
  exports: [
    RouterModule
  ]
})
export class AdminRoutingModule {}

所以admin路径有一个无组件路径:

查看AdminComponent下的子路由,我们有一个路径,其中包含路径和子属性,但它没有使用组件.我们的配置没有出错,因为我们可以使用无组件路由.

为什么在这种情况下代码插入AuthGuard子组件和根组件(路径admin)？在根部守卫是不够的？

我已经创建了一个基于示例的plunkr,它删除canActivateChild: [AuthGuard]并添加了一个注销按钮AdminDashboard.果然,canActivate父路线仍然保护,所以canActivateChild当我可以使用无组件路线时,有canActivate什么意义呢？

Answer 1

来自文档:

当我们了解如何使用CanActivate保护路线时,我们还可以使用CanActivateChild防护来保护儿童路线.CanActivateChild防护与CanActivate防护类似,但不同之处在于它在每个子路由被激活之前运行.我们保护我们的管理功能模块免受未经授权的访问,但我们也可以保护功能模块中的子路由.

这是一个实际的例子:

1. 导航到 /admin
2. canActivate 检查
3. 您在/admin路由的子节点之间导航,但canActivate由于它保护,因此不会调用它/admin
4. canActivateChild 只要在其定义的路径的子节点之间进行更改,就会调用它.

我希望这可以帮助你,如果仍然不清楚,你可以通过添加警卫调试它们来检查特定的功能.

Answer 2

在现实世界中,我觉得为父母及其所有孩子使用相同的守卫是多余的.

更好的示例是,假设您拥有管理员用户的角色(编辑/查看),您可以为"仅编辑"选项卡添加一个警卫.

    RouterModule.forChild([
      {
        path: 'admin',
        component: AdminComponent,
        canActivate: [AuthGuard],  //1 - redirect to login page if not logged in
        children: [
          //View Access
          {
            ......
          },
          //Edit Access
          {
            path: '',
            canActivateChild: [EditGuard], //2 - display "you don't have Edit permission to access this page"
            children: [
              { path: 'crises', component: ManageCrisesComponent },
              { path: 'heroes', component: ManageHeroesComponent },
              { path: '', component: AdminDashboardComponent }
            ]
          }
        ]
      }
    ])