Góc 2 Điều hướng dựa trên vai trò trên cùng một đường dẫn

Question

Tôi có một câu hỏi nhỏ liên quan đến bộ định tuyến Angular 2 sử dụng phiên bản 3.0.0-rc.1 Tôi muốn điều hướng đến thành phần nhà khác dựa trên vai trò người dùng như AdminComponent hoặc UserComponent. Bất cứ ai có thể xin giúp đỡ trong việc sửa đổi các tuyến đường dưới đây để tôi có thể đạt được các chức năng mong muốn?

{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'; 
    } 
} 

Cảm ơn.

Answer 1

Vấn đề là bạn không thể có hai tuyến đường có cùng đường dẫn. Thay đổi dễ dàng nhất mà bạn có thể thực hiện là thay đổi đường dẫn đến một cái gì đó như thế này:

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

Đây có lẽ là lựa chọn tốt nhất vì bạn muốn các thành phần khác nhau dựa trên vai trò người dùng. Bạn cũng có thể muốn các thành phần khác khác nhau và bạn có thể làm điều đó một cách dễ dàng bằng cách thêm trẻ em vào quản trị viên hoặc tuyến đường người dùng.

Trong AuthGuard, bạn vẫn chỉ trả về true, nhưng bạn thực hiện hai bảo vệ khác cho quản trị viên và tuyến đường người dùng. Kiểm tra xem người dùng có phải là người quản trị hay không.

Và bạn chuyển hướng đến con đường đúng bằng cách kiểm tra vai trò người dùng một lần ông Loges trong và sau đó trong thành phần bạn router.navigate(['/admin']) hoặc router.navigate(['/user'])