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

Question

In my Angular-14 application, I have these roles from the API:

1. Admin
2. Teacher
3. Student

I use userRole = localStorage.getItem('role') to display this. Each user can only have a role.

I want to apply the roles to the sidebar, so that only the specified roles will see the allowed menu.

sidebar.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>

I want to to achieve these:

1. All users to view Dashboard
2. Only Admin and Teacher to view Student List
3. Only Admin to view Fee List
4. Only Student to view My Fees

How do I apply userRole() to achieve this?

Thanks

Answer 1

You would still want to look into route guards to lock down the actual route but you can conditionally add menu items

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() {
  }
}