所以,我试图通过使用警卫来保护对多条路线的访问.我正在使用以下路由来执行此操作：
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并带来canActivateChildback时,控制台会显示
Guarding children...
当我同时保留两者时,它会回到展示守卫……
那么,我的问题是,当canActivate保护根元素和子元素时,拥有canActivateChild的目的是什么？
PS：我知道canActivateChild在激活子路由之前运行.但那有什么好处呢？是不是只保留其中一个？
两者都很重要,因为您可能有不同的要求,用户可以访问根组件,但可能不满足子组件的条件.
示例：您可能遇到必须通过身份验证才能导航到根组件的情况,但必须具有权限“x”才能访问子组件.在这种情况下,canActivateChild可以节省大量的输入,因为必须为每个孩子添加canActivate防护.
编辑：
例如,您可能有一个管理模块,其中所有路由都需要防止未经授权的进入：
{
path: 'admin',component: ...,},{
path: 'manage-users',{
path: 'manage-roles',}
]
}
这需要从上到下保护.未经授权访问任何路由,包括root和children.在这种情况下,在根级别激活可以很好地保护一切.
但是,您可能还有一些功能模块,其中只需要保护某些孩子：
{
path: 'featureA',children : [
{
path: 'manage-feature',{
path: 'manage-members',}
],{path: 'featureB',component: ...}
}
在这种情况下,也许所有用户都需要访问根组件的featureA’和’featureB’,但只有某些用户需要能够导航到’featureA’的子路由.在这种情况下,更容易在根级别使用一个防护装置来保护儿童,而不是根本身.另一种方法是将canActivate防护装置放在每个子路线上,这可能会变得乏味.
这完全取决于您的要求,但是拥有canActivate和canActivateChild两个选项会很不错.
