CanActivate와 CanActivateChild의 차이점을 이해하려고 시도합니다.

Question

그래서 저는 경비원을 사용하여 여러 경로에 대한 액세스를 보호하려고합니다. 나는 그렇게하려면 다음 경로를 사용하고 있습니다 : 여기

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

내가 '/ 관리'와 '/ 관리/편집'에 액세스하려고하면

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 
    } 

} 

처럼 AuthGuardService가 어떻게 생겼는지 살펴입니다 canActivate 콘솔 만 표시 나는 canActivate를 제거하고 콘솔 표시를 canActivateChild을 다시 가져

Guarding... 

을 ( canActivateChild는 주석)과 ys

Guarding children... 

둘 다 유지하면 Guarding...으로 돌아갑니다. canActivate이 루트 요소와 하위 요소를 모두 보호 할 때 canActivateChild의 목적은 무엇입니까?

추신 : 자식 경로가 활성화되기 전에 canActivateChild이 실행됩니다. 그러나 그 이점은 무엇입니까? 그 중 하나만 유지하는 것이 충분하지 않습니까?

Answer 1

둘 다 중요합니다. 사용자가 루트 구성 요소에 액세스 할 수 있지만 자식 구성 요소의 조건을 충족하지 못할 수있는 요구 사항이 다를 수 있기 때문입니다.

예 : 루트 구성 요소를 탐색하기 위해 사용자를 인증해야하지만 하위 구성 요소에 액세스하려면 'x'권한이 있어야합니다. 이 경우, canActivateChild은 많은 아이들이 각각의 아이들에게 경비원 canActivate을 추가하지 않아도됩니다.

편집 :

{ 
    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과 canActivateChild의 두 가지 옵션을 사용하는 것이 좋습니다.내보기에서

Answer 2

는 CanActivate는 특정 경로에서 액세스 및 모든 하위 경로를 제한하는 데 사용됩니다 및 CanActivateChild은 CanActivate 경로 내부의 특정 그룹에 대한 액세스를 제한하는 데 사용됩니다.

예 : 검증의 두 가지 유형이 필요하기 때문에 당신이 canActivate 경로 내부의 permision을 확인하기위한 canActivateChild 필요하므로

{ 
    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 방법을 가질 수 없습니다. 분명히 다른 가드 서비스 (AuthGuardForChildrenRoutes)를 만들고 여전히 canActivate 방법을 사용할 수 있지만 그게 중요한 것은 아닙니다.