Question

我正在使用Angular构建仪表板。仪表板的用户为1：管理员（允许其在边栏中看到完整的菜单）和2：员工（仅允许其在边栏中看到该菜单的一部分）。

我应该如何定义菜单项，以便可以根据定义的用户权限动态显示菜单项？

谢谢

Answer 1

import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
import { PermissionService } from '../services/web-api/permission.service';

@Directive({
  selector: '[appAuthorizeAction]'
})
export class AuthorizeActionDirective implements OnChanges {
  @Input('path') path: string;
  @Input('permission') permission: string;

  constructor(private el: ElementRef, private permissionService: PermissionService) {
  }

  ngOnChanges() {
    const authResult = this.permissionService.isAuthorized(this.path, this.permission);
    if (authResult !== true) {
      this.el.nativeElement.remove();
    }
  }
}

您可以使用以下内容并在任何项目上实现：用法示例：

<button mat-button appAuthorizeAction [path]="'ADMIN_PANEL'" [permission]="'EXECUTE'">Click me!</button>

如果用户有权执行执行操作，它将保留该按钮，否则将其删除。

Answer 2

这是我的角色保护者的摘录：

public canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
): Observable<boolean> {
    const roles: UserRoles[] = route.data['roles'];
    return this.authenticationService.currentPrincipal.pipe(take(1), map((user) => {
        // console.log(roles);
        return roles.every((val) => user.roles.includes(val));
    }));
}

因此您可以看到我的用户身份验证获得并设置了currentUser的角色。

创建用户后，他们的Principle角色将被设置为用户类型。（可以由管理员更新）

让我知道是否需要更多。

在Angular中隐藏菜单的一部分（权限）

2 个答案: