试图了解 CanActivate 和 CanActivateChild 之间的区别

Question

所以，我试图通过使用守卫来保护对几条路线的访问。我正在使用以下路线这样做：

const adminRoutes : Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [ AuthGuardService ],
    children : [
      {
        path: '',
        canActivateChild: [ AuthGuardService ],
        children: [
          { path: 'edit', component: DashboardComponent},
          { path: '', component: DashboardComponent}
        ]
      }
    ]
  }
];

下面是 AuthGuardService 的样子

import { Injectable } from '@angular/core';
import {CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot} from "@angular/router";

@Injectable()
export class AuthGuardService implements CanActivate{

  constructor(private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    console.log("Guarding...");
    return this.sessionValid();
  }

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    console.log("Guarding children...");
    return this.canActivate(route, state);
  }

  sessionValid() : boolean {
    //tests
  }

}

当我尝试仅使用 canActivate 访问“/admin”和“/admin/edit”时（canActivateChild 被注释），控制台显示

Guarding...

当我移除 canActivate 并将 canActivateChild 带回时，控制台显示

Guarding children...

当我保留两者时，它会返回显示 Guarding...。所以，我的问题是当 canActivate 保护根元素和子元素时 canActivateChild 的目的是什么？

PS ：我知道 canActivateChild 在激活子路由之前运行。但是这样做有什么好处呢？只留其中一个还不够吗？

Answer 1

两者都很重要，因为您可能有不同的要求，用户可以访问根组件，但可能不满足 child 组件的条件。

示例：您可能会遇到这样一种情况，用户必须经过身份验证才能导航到根组件，但必须具有权限 'x' 才能访问 child 组件。在这种情况下，canActivateChild 节省了大量的输入，而不必为每个 children 添加 canActivate 守卫。

编辑：

例如，您可能有一个管理模块，其中所有路由都需要防止未经授权的进入：

  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [ AuthGuardService ],
    children : [
      {
        path: '', component: ...,
      },
      {
        path: 'manage-users', component: ...,
      },
      {
        path: 'manage-roles', component: ...,
      }
    ]
  }

这需要自上而下的保护。不得未经授权访问任何路由，包括 root 和 children。在这种情况下，canActivate 在根级别可以很好地保护所有内容。

但你也可能有这样的时候，你有一个功能模块，其中只有某些 children 需要被保护：

  {
    path: 'featureA',
    component: ...,
    canActivateChild: [ AuthGuardService ],
    children : [
      {
        path: 'manage-feature', component: ...,
      },
      {
        path: 'manage-members', component: ...,
      }
    ],
    {path: 'featureB', component: ...}
  }

在这种情况下，也许所有用户都需要到达根组件 'featureA' 和 'featureB'，但只有某些用户需要能够导航到 child 的路由'featureA'。在这种情况下，更容易在根级别使用一个守卫来保护 children，而不是根本身。另一种方法是在每条 child 路线上放置 canActivate 守卫，这可能会很乏味。

这真的完全取决于您的要求，但是同时拥有 canActivate 和 canActivateChild 选项会更好。

Answer 2

在我看来，CanActivate用于限制从某个路径和所有子路径访问，CanActivateChild用于限制对[=11内的特定组的访问=]路径。

示例：

{
  path: 'admin',
  component: AdminComponent,
  canActivate: [AuthGuardService],
  children : [
    {
      path: 'books', component: ...,
    },
    {
      path: 'authors', component: ...,
    },
    {
      path: 'payments',
      canActivateChild: [AuthGuardService],
      children: [
        {
          path: 'list', component: ...
        },
        {
          path: 'list/:id', component: ...
        }
      ]
    }
  ]
}

因为你需要两种类型的验证，你不能有两个canActivate方法，所以你需要canActivateChild来检查canActivate路径中的权限。显然，您可以创建不同的守卫服务 (AuthGuardForChildrenRoutes) 并仍然使用 canActivate 方法，但这不是重点。

Answer 3

在您的示例中，您在 canActivateChild 中调用了 canActivate，因此当您在子路由之间遍历时，两个守卫都会被调用。如果你在两个守卫中有不同的身份验证逻辑，你的 canActivate 守卫将不会在子路由之间遍历时执行。

Answer 4

sr no.	CanActivate	CanActivateChild
1	It prevents access to the parent route which also includes access to all child routes	we can access the parent route but if required we can choose to block a particular child route by using canActivateChild
2	Yes you can achieve CanActivateChild behavior by applying CanActivate to all the child routes	just adding CanActivateChild at parent route saves a lot of time and it is more convenient

这就是 canActivate 和 canActivated 之间的基本区别child
这里是这两个可以使用的情况

图：路径说明CanActivate和CanActivateChild的区别

CanActivate: 计算机系学生无法访问其他系
CanActivateChild：计算机系学生可以访问计算机系（在本例中为parent）但无法访问计算机系的一个child 即教师角色访问权限

试图了解 CanActivate 和 CanActivateChild 之间的区别

Trying to understand the differences between CanActivate and CanActivateChild

angular2-guards

angular