Angular Route Guards : Or vs. 和

Question

我正致力于使用路由守卫保护我的 Angular 应用程序的前端。在过去与他们合作和在线研究中，向路由添加多个守卫需要他们所有返回 true 以允许访问。

但是，如果我希望只有一个 返回true 以允许访问怎么办？ (像 || 而不是 &&)

例如，我的路由守卫在用户的 token 中寻找特定 Angular 色:

@Injectable()
export class ActiveRoleGuard implements CanActivate {
    constructor(private sessionService: SessionService, private router: Router) { }


    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        let token = this.sessionService.getToken();

        if (!token) {
             return false;
        }

        if (token.role.toLowerCase().indexOf("active") < 0) {
            this.router.navigate(["/issue"]);
            return false;
        }

        return true;
    }
}

和

@Injectable()
export class AdminRoleGuard implements CanActivate {
    constructor(private sessionService: SessionService, private router: Router) { }


    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        let token = this.appSessionService.getToken();

        if (!token) {
            return false;
        }

        if (token.role.toLowerCase().indexOf("admin") < 0) {
            this.router.navigate(["/issue"]);
            return false;
        }

        return true;
    }
}

如果我将它们正常组合在一个路由器模块中，它会是这样的......

{路径:“someroute”，组件:SomeComponent，canActivate:[ActiveRouteGuard，AdminRouteGuard]}

...但这需要用户既是 Active 又是 Admin。但是，如果我想强制成为 Active 并且 要么 Admin 要么 Manager?

像这样在 API 上实现很简单:

[Authorize(Roles = "Active")]
[Authorize(Roles = "Admin, Manager")]
public class SomeController : ApiController

但我如何在 Angular 中执行此操作？

Answer 1

与其使用两个单独的 CanActivate 实现，不如使用一个可以“配置”的版本。为此，您可以利用 Route 的 data 属性.例如，在您的 route ，您可以执行以下操作:

{
    path: "someroute",
    component: SomeComponent,
    canActivate: [RoleRouteGuard],
    data: {
        requiredRoles: ["Role1", "Role2", "Role3"]
    }
}

使用它，您可以采用现有的 CanActivate 实现之一，并使其更通用。您可以通过 ActivatedRouteSnapshot 从 data 访问 requiredRoles 属性。例如:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const requiredRoles = route.data.requiredRoles;
    ....

一旦你得到这个，你可以检查 token 的 Angular 色是否在数组中等等。

如果您有一个始终需要的 Active Angular 色，然后是一个 Admin 或 Manager Angular 色，您还可以将其扩展到有多个 data 属性。例如，你可以有 requiredRoles 和 atLeastOneOfRoles 并更新你的逻辑来相应地处理......此时有很多选项，但我认为你不需要帮助解决这个问题。