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']
        }
    ]
  }
];

側邊欄.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() {
  }
}