javascript - Angular 5多个条件路由: "AuthGuards"

Question

我正在尝试在 Angular 5 中创建条件路由，我已经看到了这篇文章和 Angular 的官方里程碑页面: Angular2 conditional routing 。

但是我没有找到根据输入变量创建多个条件的方法。这是我的代码:

import { Injectable } from '@angular/core';
import {CanActivate, Router, RouterStateSnapshot, ActivatedRouteSnapshot} from '@angular/router';
import {AuthServiceService} from './auth-service.service';
@Injectable()
export class AuthguardService  implements CanActivate{

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

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        if(this.AuthService.ValidAs("User")!=true){
            this.router.navigate(['pages/login']);
            return false;
        }else{
          return true;
        }
    }

}

我的 AuthService.ValidAs() 方法采用一个参数来确定用户的类型，以尝试验证是否有权访问路由并返回一个 bool 值。我有三种类型的用户，如何将额外的参数传递给路由中的 canActivate 属性，以便将其用作我的 ValidAs 方法的参数。

如果有任何其他方法可以在不增加文件的情​​况下创建多个 canActivate 实例，请告诉我。

Answer 1

您可以将 data 对象传递给任何这样的路由:

...
{
   path:'dashboard',
   component:DashboardComponent,
   canActivate:[
      AuthGuard
   ],
   data:{
      roles: ['ROLE_ADMIN', 'ROLE_EDITOR', 'OTHER_ROLE'],
      // any other relevant data to make your checks
   }
},
...

然后在您的 AuthGuard 中您可以检索数据，例如:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    ...
    const roles = route.data[ 'roles' ] as Array<string>;

    // Do other checks here
    ...
}