具有无组件路由的 CanActivate 与 CanActivateChild [英] CanActivate vs. CanActivateChild with component-less routes

问题描述

关于 Route Guards 的 angular2 文档离开了我不清楚何时将 CanActivate 防护与 CanActivateChild 防护与无组件路由结合使用比较合适.

The angular2 documentation about Route Guards left me unclear about when it is appropriate to use a CanActivate guards vs. a CanActivateChild guard in combination with component-less routes.

TL;DR:当我可以使用带有 canActivate 的无组件路由来实现相同的效果时，使用 canActivateChild 有什么意义?

TL;DR: what's the point in having canActivateChild when I can use a component-less routes with canActivate to achieve the same effect?

长版:

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

We can have multiple guards at every level of a routing hierarchy. The router checks the CanDeactivate and CanActivateChild guards first, from deepest child route to the top. Then it checks the CanActivate guards from the top down to the deepest child route.

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

I get that CanActivateChild is checked bottom up and CanActivate is checked top down. What doesn't make sense to me is the following example given in the docs:

@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 路径有一个无组件路由:

So the admin path has a component-less route:

查看我们在AdminComponent下的子路由，我们有一个路由有一个路径和一个子属性，但它没有使用组件.我们没有在我们的配置中犯错误，因为我们可以使用无组件路由.

Looking at our child route under the AdminComponent, we have a route with a path and a children property but it's not using a component. We haven't made a mistake in our configuration, because we can use a component-less route.

为什么这种情况下的代码在子组件和根组件(路径admin)中插入AuthGuard?守在根上就够了吗?

Why is the code in this case inserting the AuthGuard in the child and in the root component (path admin)? Wouldn't is suffice to guard at the root?

我根据删除了 canActivateChild: [AuthGuard] 的示例创建了一个 plunkr 并在 AdminDashboard 上添加一个注销按钮.果然，父路由的 canActivate 仍然守卫，所以当我可以使用 canActivate 的无组件路由时，拥有 canActivateChild 有什么意义?

I have created a plunkr based on the sample that removes the canActivateChild: [AuthGuard] and adds a logout button on the AdminDashboard. Sure enough, the canActivate of the parent route still guards, so what's the point in having canActivateChild when I can use component-less routes with canActivate?

推荐答案

来自文档:

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

As we learned about guarding routes with CanActivate, we can also protect child routes with the CanActivateChild guard. The CanActivateChild guard works similarly to the CanActivate guard, but the difference is its run before each child route is activated. We protected our admin feature module from unauthorized access, but we could also protect child routes within our feature module.

这是一个实际例子:

1. 导航到 /admin
2. canActivate 被选中
3. 您在 /admin 路由的子级之间导航，但是 canActivate 没有被调用，因为它保护了 /admin
4. canActivateChild 每当在其定义的路由的子级之间发生变化时都会被调用.

1. navigating to /admin
2. canActivate is checked
3. You navigate between the children of /admin route, but canActivate isn't called because it protects /admin
4. canActivateChild is called whenever changing between children of the route its defined on.

希望对你有帮助，如果还不清楚，你可以通过添加守卫来调试它们来检查特定的功能.

I hope this helps you, if still unclear, you can check specific functionality by adding guards debugging them.

这篇关于具有无组件路由的 CanActivate 与 CanActivateChild的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！