javascript - Angular 5 多条件路由："AuthGuards"

我正在尝试在 Angular 5 中创建条件路由，我已经看过这篇文章以及 Angular 的官方里程碑页面：Angular2 条件路由。

但是我没有找到一种方法可以基于输入变量创建多个条件。以下是我的代码：

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() 方法接受一个参数，用来确定尝试验证的用户类型以判断其是否有权访问某个路由，并返回一个布尔值。我有三种用户类型，我如何将额外参数传递给路由中的 canActivate 属性，以便将其用作 ValidAs 方法的参数。

如果有其他方法可以创建多个 canActivate 实例而不增加文件数量，请告诉我。

答案＃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
    ...
}

答案＃2

你有两个选择。

首先是使用 params 或 queryParams。

canActivate(
  route: ActivatedRouteSnapshot, 
  state: RouterStateSnapshot): boolean {
  const userType = router.paramMap.get('userType');
}

第二点是使用依赖注入。

constructor(
  private router: Router,
  private AuthService: AuthServiceService,
  @Inject(CURRENT_USER) user: User,
) {}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
  const userType = this.user.type;
}