参数传递到警戒角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);