각도 2 역할 기반 탐색 동일한 경로에서

Question

3.0.0-rc.1을 사용하는 각도 2 라우터와 관련하여 작은 질문이 있습니다. AdminComponent 또는 UserComponent와 같은 사용자 역할을 기반으로 다른 홈 구성 요소로 이동하려고합니다. 누구든지 원하는 기능을 얻을 수 있도록 경로를 수정하는 데 도움을 줄 수 있습니까?

{path: 'login', component: LoginComponent}, // <--- This redirects to '/' in case user is logged in 
{ 
    path: '', 
    component: HomeComponent,    
    canActivate: [AuthGuardService], // <--- Check if user is logged in, else redirect to login 
    children: [ 
    { 
     path: '', 
     component: AdminComponent // <--- Want to navigate here if user role is 'admin' 
    }, 
    { 
     path: '', 
     component: UserComponent // <--- Want to navigate here if user role is 'user' 
    } 
    ] 
} 

AuthGuardService.ts

import {Injectable} from "@angular/core"; 
import {CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot} from "@angular/router"; 
import {AuthService} from "./auth.service"; 

@Injectable() 
export class AuthGuardService implements CanActivate { 

    constructor(private authService: AuthService, private router: Router) { 
    } 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
    if (this.authService.isLoggedIn()) { 
     return true; 
    } 

    // Store the attempted URL for redirecting 
    this.authService.redirectUrl = state.url; 

    // Navigate to the login page with extras 
    this.router.navigate(['/login']); 
    return false; 
    } 
} 

AuthService.ts

import {Injectable} from "@angular/core"; 

@Injectable() 
export class AuthService { 
    redirectUrl: string; 

    logout() { 
    localStorage.clear(); 
    } 

    isLoggedIn() { 
    return localStorage.getItem('token') !== null; 
    } 

    isAdmin() { 
    return localStorage.getItem('role') === 'admin'; 
    } 
} 

감사합니다.

Answer 1

문제는 동일한 경로로 두 개의 경로를 가질 수 없다는 것입니다. 당신이 할 수있는 가장 쉬운 변화는 이런 식으로 경로를 변경하는 것입니다

{ 
     path: 'admin', 
     component: AdminComponent 
    }, 
    { 
     path: 'user', 
     component: UserComponent 
    } 

이것은 당신이 당신의 구성 요소는 사용자 역할에 따라 서로 다른되고 싶어하기 때문에 때문에 가장 좋은 방법은 아마이다. 다른 구성 요소가 달라지기를 원할 수도 있습니다. 관리자 또는 사용자 경로에 하위 항목을 추가하여 쉽게 구성 할 수 있습니다.

AuthGuard에서 여전히 true를 반환하지만 관리자와 사용자 경로에 대해 다른 두 명의 경호원을 만듭니다. 어떤 사용자가 관리자인지 아닌지 확인합니다.

그리고 당신은 그가 당신이 router.navigate(['/admin']) 또는