时间戳

首页 > 解决方案 > 在 Angular 中隐藏部分菜单（权限）

angular - 在 Angular 中隐藏部分菜单（权限）

问题描述

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

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

谢谢

标签： angularauthenticationangular-material

解决方案

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>

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

推荐阅读