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  style="overflow-y: hidden">
      <ul
          
          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

CodePudding user response：

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