Angular show and hide the side menu bar items based on the user roles

Question

I am loading angular side menu bar based the response getting from server. And want to conditionally show and hide the menu items based on the user roles.

userRoles = [1,2];

Below is the JSON getting from server,

{
  "menu": [
    {
      "title": "Merchant",
      "order": 1,
      "subMenu": [
        {
          "order": 1,
          "subMenu1": "Initiate"
        }
      ]
    },
    {
      "title": "Prepaid",
      "order": 2,
      "subMenu": [
        {
          "order": 1,
          "subMenu1": "Merch"
        }
      ]
    }

And the sample angular menu item,

 <ul class="sidebar-menu collapsible collapsible-accordion" data-collapsible="accordion">
                <ng-container>
                    <li *ngFor="let parentMenu of sideMenuResponse" class="no-padding">
                        <a class="collapsible-header">
                            <i class="material-icons"></i> {{parentMenu.title}}
                            <i class="nav-drop-icon material-icons">keyboard_arrow_right</i>
                        </a>
                            <div class="collapsible-body">
                                <ul *ngFor="let submenu of parentMenu.subMenu">
                                       <li>
                                        <a target="_self" [routerLink]="">
                                            {{submenu.subMenu1}}</a>
                                       </li> 
                                </ul>
                            </div>
                    </li>
                </ng-container>
            </ul> 

And want to hide the Initiate2 submenu if the user role is 1

And hide the Prepaid menu if the user role is 2

Can any one help me to achieve this?

Answer 1

First question is why is the server sending down unavailable menu options? Negates any reason for the server doing that in the first place; save the effort, data, and cpu cycles to just keep the whole thing UI-side only.

So, first answer is to not touch the UI and filter it appropriately server-side.

Second answer is to apply filtering based on what you want.

I'm assuming that order has something to do with the user roles? The 1/2 kind of match up to what you're saying.

First: change the naming. Order.= access control. It's confusing. Order suggests display order on-screen for this menu and not at all that it's relevant to showing or hiding anything.

Second: include only what the user has access to - get the base menu items, and then pull out only what the user can see:

Note: I'm going to change the shape of the objects for this purpose - I don't care about order but I do care about requiresRole for the user to be able to see it...

public userMenu: SideMenu[];

private onMenuReceived(menu: SideMenu[]): void {
    const userRoles = this.userService.getUserRoles(); // Assuming this exists to provide me with [1], [2], or even [1, 2] if that's a possibility

    const result = menu.filter(x => userRoles.includes(x.requiresRole));
    result.forEach((item: SideMenu) => {
        item.subMenu = item.subMenu.filter(x => userRoles.includes(x.requiresRole));
    });

    this.userMenu = result;
}

This gives you only the top-level menu items wherein the user has the required role, and then for each of those, trims down the submenus to only those wherein the user has the required role.

Out of this, this.userMenu should contain all the menu and sub-menu items that conform to the user having the relevant required role(s).