首页 文章

使用无组件路径CanActivate与CanActivateChild

提问于
浏览 次
36

关于Route Guards的angular2文档让我不清楚什么时候使用 CanActivate 守卫和 CanActivateChild 守卫与无组件路线相结合 .

TL;DR: 当我可以使用 canActivate 的无组件路线来实现相同的效果时， canActivateChild 的重点是什么？

长版：

我们可以在路由层次结构的每个级别拥有多个警卫 . 路由器首先检查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下的子路由，我们有一个路径，其中包含路径和子属性，但它没有使用组件 . 我们的配置没有出错，因为我们可以使用无组件路由 .

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

我根据删除了 canActivateChild: [AuthGuard] 的样本创建了一个plunkr，并在 AdminDashboard 上添加了一个注销按钮 . 果然，父路线的 canActivate 仍然保护，那么当我可以使用 canActivate 的无组件路线时， canActivateChild 的重点是什么？

angular angular2-routing

4 回答

  • 33

    我还混淆了 CanActivate 守卫和 CanActivateChild 守卫之间的区别 .

    我有一些调查结果，希望这对你有帮助 .

    在 auth-guard.service.ts 文件中

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
let url: string = state.url;

return this.checkLogin(url);
}

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

    因为在 canActivateChild 函数中调用 canActivate 方法 . 您可以编写一段不在 canActivateChild 函数中调用 canActivate 方法的代码片段 .

    回复于
  • 3

    我能想到的一个原因是 timeouts .

    我正在使用身份验证提供程序开始使用Angular 2 . 此提供程序使一个空闲超过一定时间的会话到期 .

    在您让计算机登录并且会话过期的常见情况下，您尝试的下一个导航必须验证您当前的情况 . 如果您在子路由之间导航，我认为 CanActivateChild 是将检测过期会话的警卫，并触发重定向登录，而 CanActivate 根本不会触发 .

    Disclaimer: 这来自我的头脑，我还没有实现它 .

    回复于
  • 4

    From the docs:

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

    这是一个实际的例子：

    • 导航至 /admin

    • canActivate 已选中

    • 您在 /admin 路线的子项之间导航，但未调用 canActivate ，因为它保护 /admin
      只要在其定义的路径的子节点之间进行更改，就会调用

    • canActivateChild .

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

    回复于
  • 0

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

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

    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 }
            ]
          }
        ]
      }
    ])
    回复于

相关问题