參數傳遞到警戒角2

Question

我有一個應用程序，我有一個認證Guard設置，以確保用戶無法訪問應用程序，除非它們已經登錄，像這樣

import { Injectable } from '@angular/core'; 
import { 
    CanActivate, Router, 
    ActivatedRouteSnapshot, 
    RouterStateSnapshot, 
    CanActivateChild } from '@angular/router'; 
import { AuthContext } from './auth-context.service'; 

@Injectable() 
export class AuthGuard implements CanActivate { 
     constructor(private router: Router, private authContext: AuthContext) { } 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
     // Check to see if a user has a valid JWT 
     if (this.authContext.userInfo !== undefined && this.authContext.userInfo.isAuthenticated) { 
      // If they do, return true and allow the user to load the home component 
      return true; 
     } 

     // If not, they redirect them to the login page 
     this.router.navigate(['/login']); 
     return false; 
    } 

    canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
     return this.canActivate(route, state); 
    } 
} 

我想補充另一個後衛授權將檢查用戶是否處於特定角色。目前，我正在根據此角色隱藏導航中的鏈接。

<div *ngIf="userInRole('Admin')"> 
      This is secret stuff 
</div> 

但是，如果用戶知道路由，他們可以將其插入到url中。我如何將我的「userInRole（）」類型的功能添加到Guard？我將不得不通過角色名稱並執行代碼檢查。衛兵支持參數嗎？

Answer 1

守衛只是一個實現CanActivate或CanDeactivate的類。但是沒有任何東西可以阻止你注入一個服務（或一個值），它將返回你的用戶角色。例如，

export class AuthGuard implements CanActivate { 
     constructor(private router: Router, private authContext: AuthContext, 
      private user: MyUserService) { } 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
      if (!this.user.isAdmin()) return false; 
      ... 

    } 
} 

Answer 2

我找到的解決了這個

import { Injectable } from '@angular/core'; 
    import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; 
    import { Observable } from 'rxjs/Observable'; 

    @Injectable() 
    export class IsInRoleGuard implements CanActivate { 
     constructor(
     ) { } 

     canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean { 
      if (['admin', 'super'].indexOf(next.data['roles']) !== -1) {//We Are getting the roles from the data 

       return true; 
      } 
      return false; 
     } 
    } 

，並在你的路由器配置

import { Routes, RouterModule } from '@angular/router'; 
import { ModuleWithProviders } from '@angular/core'; 
import { RootComponent } from './root/root.component'; 
import { DashboardComponent } from './dashboard/dashboard.component'; 
import { IsInRoleGuard } from '../../guards/is-in-role.guard'; 

const routes: Routes = [ 
    { 
     path: '', component: RootComponent, children: [ 
      { 
       path: '', pathMatch: 'full', component: DashboardComponent, data: { 
        roles: [ 
         'admin', 
         'super-admin' 
        ] 
       } 
      } 
     ] 
    } 
]; 

export const RouterConfig: ModuleWithProviders = RouterModule.forChild(routes);