试图了解CanActivate和CanActivateChild之间的区别 [英] Trying to understand the differences between CanActivate and CanActivateChild

问题描述

因此，我正在尝试通过使用防护措施来保护对多条路线的访问.我正在使用以下路线来做到这一点:

So, I'm trying to protect the access to several routes by using guards. I'm using the following routes to do so :

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(注释canActivateChild)访问'/admin'和'/admin/edit'时，控制台将显示

When I try to access to '/admin' and '/admin/edit' with canActivate only (canActivateChild is commented) the console displays

Guarding...

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

When I remove canActivateand bring canActivateChildback the console displays

Guarding children...

当我同时保留两者时，它又回到显示Guarding.... 所以，我的问题是，当canActivate同时保护根元素和子元素时，拥有canActivateChild的目的是什么?

When I keep both, it goes back to displaying Guarding.... So, my question is what's the purpose of having canActivateChild when canActivateprotects both the root element and the children ?

PS:我认为canActivateChild在激活子路由之前运行.但是，这样做有什么好处呢?仅保留其中之一就够了吗?

PS : I get it that canActivateChild runs before the child route is activated. But what are the benefits of that ? Isn't keeping only one of them sufficient ?

推荐答案

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

Both are important because you may have differing requirements where a user can get to the root component, but may not meet conditions for child components.

示例:您可能遇到这样的情况:必须对用户进行身份验证才能导航到根组件，但必须具有权限"x"才能访问子组件.在这种情况下，canActivateChild不必为每个子级添加canActivate防护，从而节省了很多打字工作.

Example: You could have a situation where a user must be authenticated to navigate to the root component, but must have permission 'x' to get to child components. In cases like this, canActivateChild saves a lot of typing from having to add canActivate guards to each of the children.

例如，您可能拥有一个管理模块，在该模块中，必须防止所有路由遭到未经授权的进入:

For example, you may have an Admin Module where all routes need to be guarded against unauthorized entry:

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

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

This would need to be protected from the top down. No unauthorized access to any of the routes, including the root and children. In this situation canActivate at the root level works great to protect everything.

但是有时您可能还会有一个Feature模块，其中只有某些孩子需要受到保护:

But you may also have times where you have a Feature module where only certain children need to be guarded:

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

在这种情况下，也许所有用户都需要访问根组件'featureA'和'featureB'，但是只有某些用户需要能够导航到'featureA'的子路线.在这种情况下，更容易在根级别使用一个保护来保护孩子，而不是根本身.另一种选择是在每个子路径上放置canActivate防护，这可能会很乏味.

In this situation, maybe all users need to get to the root components 'featureA' and 'featureB', but only certain users need to be able to navigate to the child routes of 'featureA'. In this case it is easier to use one guard at the root level to protect the children, but not the root itself. The alternative is to put canActivate guards on each child route, which could get tedious.

这实际上取决于您的要求，但是同时具有canActivate和canActivateChild这两个选项可能会很好.

It really all depends upon your requirements, but it can be nice to have both options of canActivate and canActivateChild.

这篇关于试图了解CanActivate和CanActivateChild之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！