Angular - 如何在侧面菜单上应用用户角色权限

Question

在我的 Angular-14 应用程序中，我具有来自 API 的以下角色：

1. 管理员
2. 老师
3. 学生

我使用 userRole = localStorage.getItem('role') 来显示它。每个用户只能有一个角色。

我想将角色应用到侧边栏，这样只有指定的角色才会看到允许的菜单。

侧边栏.ts：

export class SidebarComponent implements OnInit {
  @HostBinding('class') classes: string = BASE_CLASSES;
  public menu = MENU;
  userRole = localStorage.getItem('role');

  constructor(
  ) {}

  ngOnInit() {

  }

}
export const MENU = [
  {
      name: 'Dashboard',
      iconClasses: 'fas fa-tachometer-alt',
      path: ['/admin-dashboard']
  },
  {
      name: 'Student List',
      iconClasses: 'fas fa-users',
      path: ['/admin-dashboard/students-list']
  },
  {
    name: 'Payments',
    iconClasses: 'fas fa-calendar',
    children: [
        {
            name: 'Fee List',
            iconClasses: 'far fa-circle nav-icon',
            path: ['/admin-dashboard/fee-list']
        },
        {
            name: 'My Fees',
            iconClasses: 'far fa-circle nav-icon',
            path: ['/admin-dashboard/myfees']
        }
    ]
  }
];

sidebar.html：

  <nav class="mt-2" style="overflow-y: hidden">
      <ul
          class="nav nav-pills nav-sidebar flex-column"
          data-widget="treeview"
          role="menu"
          data-accordion="false"
      >
          <app-menu-item
              *ngFor="let item of menu"
              [menuItem]="item"
          ></app-menu-item>
      </ul>
  </nav>

我想实现这些：

1. 所有用户均可查看仪表板
2. 只有管理员和老师可以查看学生列表
3. 只有管理员可以查看费用列表
4. 只有学生可以查看我的费用

如何应用 userRole() 来实现此目的？

谢谢

Answer 1

您仍然想研究路线守卫来锁定实际路线，但您可以有条件地添加菜单项

export class SidebarComponent implements OnInit {
  @HostBinding('class') classes: string = BASE_CLASSES;
  userRole = localStorage.getItem('role') as "admin" | "teacher" | "student";
  public menu = [
    {
        name: 'Dashboard',
        iconClasses: 'fas fa-tachometer-alt',
        path: ['/admin-dashboard']
    },
    ...(this.userRole === "admin" || this.userRole === "teacher" ? [{
        name: 'Student List',
        iconClasses: 'fas fa-users',
        path: ['/admin-dashboard/students-list']
    }] : []), 
    ...(this.userRole === "admin" || this.userRole === "student" ? [{
      name: 'Payments',
      iconClasses: 'fas fa-calendar',
      children: [
          ...(this.userRole === "admin" ? [{
              name: 'Fee List',
              iconClasses: 'far fa-circle nav-icon',
              path: ['/admin-dashboard/fee-list']
          }] : []),
          ...(this.userRole === "student" ? [{
              name: 'My Fees',
              iconClasses: 'far fa-circle nav-icon',
              path: ['/admin-dashboard/myfees']
          }] : [])
      ]
    }] : [])
  ];

  constructor(
  ) {}

  ngOnInit() {
  }
}

Answer 2

使用 ngx-权限

https://github.com/AlexKhymenko/ngx-permissions

示例：

<div *ngxPermissionsOnly="['ADMIN', 'GUEST']">