모든 경로에서 Can Activate guard를 신청하는 방법은?

모든 경로에서 Can Activate guard를 신청하는 방법은?

사용자가 로그인하지 않은 경우 로그인 페이지로 리디렉션하는 angular2 active guard가 있습니다.

import { Injectable } from  "@angular/core";
import { CanActivate , ActivatedRouteSnapshot, RouterStateSnapshot, Router} from "@angular/router";
import {Observable} from "rxjs";
import {TokenService} from "./token.service";

@Injectable()
export class AuthenticationGuard implements CanActivate {

    constructor (
        private router : Router,
        private token : TokenService
    ) { }

    /**
     * Check if the user is logged in before calling http
     *
     * @param route
     * @param state
     * @returns {boolean}
     */
    canActivate (
        route : ActivatedRouteSnapshot,
        state : RouterStateSnapshot
    ): Observable<boolean> | Promise<boolean> | boolean {
        if(this.token.isLoggedIn()){
            return true;
        }
        this.router.navigate(['/login'],{ queryParams: { returnUrl: state.url }});
        return;
    }
}

다음과 같이 각 경로에서 실행해야 합니다.

const routes: Routes = [
    { path : '', component: UsersListComponent, canActivate:[AuthenticationGuard] },
    { path : 'add', component : AddComponent, canActivate:[AuthenticationGuard]},
    { path : ':id', component: UserShowComponent },
    { path : 'delete/:id', component : DeleteComponent, canActivate:[AuthenticationGuard] },
    { path : 'ban/:id', component : BanComponent, canActivate:[AuthenticationGuard] },
    { path : 'edit/:id', component : EditComponent, canActivate:[AuthenticationGuard] }
];

canActive 옵션을 각 경로에 추가하지 않고 구현할 수 있는 더 나은 방법이 있습니까?

제가 원하는 것은 주요 노선에 추가하는 것이고, 다른 모든 노선에 적용되어야 합니다.많이 찾아봤지만, 유용한 해결책을 찾을 수 없었습니다.

감사해요.

구성 요소가 없는 상위 경로를 도입하고 보호를 적용할 수 있습니다.

const routes: Routes = [
    {path: '', canActivate:[AuthenticationGuard], children: [
      { path : '', component: UsersListComponent },
      { path : 'add', component : AddComponent},
      { path : ':id', component: UserShowComponent },
      { path : 'delete/:id', component : DeleteComponent },
      { path : 'ban/:id', component : BanComponent },
      { path : 'edit/:id', component : EditComponent }
    ]}
];

또한 app.component의 ngOnInit 기능에서 라우터의 경로 변경을 가입하고 인증을 확인할 수 있습니다.

    this.router.events.subscribe(event => {
        if (event instanceof NavigationStart && !this.token.isLoggedIn()) {
            this.router.navigate(['/login'],{ queryParams: { returnUrl: state.url}}); 
        }
    });

저는 경로가 변경될 때 어떤 종류의 앱이든 전체적으로 확인하는 이런 방식을 선호합니다.

부모(예를 들어 경로 "admin"을 가진)와 자녀를 둘 수 있는 "자녀 라우팅"을 구현해야 한다고 생각합니다.

그런 다음 부모에게 모든 자식에 대한 액세스를 자동으로 제한하는 캔 활성화를 적용할 수 있습니다.예를 들어 "admin/home"에 액세스하려면 canActivate에 의해 보호되는 "admin"을 거쳐야 합니다.원하는 경우 빈 경로 ""로 부모를 정의할 수도 있습니다.

언급URL : https://stackoverflow.com/questions/43487827/how-to-apply-canactivate-guard-on-all-the-routes