Угловая 2 Навигация на основе ролей по тому же пути

Question

У меня есть небольшой вопрос относительно маршрутизатора с угловым 2 с использованием версии 3.0.0-rc.1 Я хочу перейти к другому домашнему компоненту на основе роли пользователя, такой как 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']) или router.navigate(['/user'])