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

所以，我试图通过使用警卫来保护通往几条路线的通道。我正在使用以下路线来执行此操作：

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
  }

}

当我尝试访问“/admin”和“/admin/edit”时canActivate only (canActivateChild被注释）控制台显示

Guarding...

当我删除时canActivate并带来canActivateChild返回控制台显示

Guarding children...

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

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

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

示例：您可能会遇到这样的情况：用户必须经过身份验证才能导航到根组件，但必须具有权限“x”才能访问子组件。在这样的情况下，canActivateChild无需添加即可节省大量打字时间canActivate守护着每一个孩子。

EDIT:

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

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

这需要自上而下的保护。未经授权不得访问任何路由，包括根路由和子路由。在这个情况下canActivate从根本上来说，它可以很好地保护一切。

但有时您也可能有一个功能模块，其中只需要保护某些子项：

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

在这种情况下，也许所有用户都需要访问根组件“featureA”和“featureB”，但只有某些用户需要能够导航到“featureA”的子路由。在这种情况下，更容易在根级别使用一个防护来保护子级，而不是根本身。另一种方法是把canActivate每条儿童路线都有警卫，这可能会很乏味。

这实际上完全取决于您的要求，但同时拥有这两种选择可能会很好canActivate and canActivateChild.