Angular 根据用户角色显示和隐藏侧面菜单栏项目

Question

我正在根据从服务器获得的响应加载 angular 侧边菜单栏。 并希望根据用户角色有条件地显示和隐藏菜单项。

userRoles = [1,2];

以下是从服务器获取的 JSON，

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

以及示例 angular 菜单项，

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

如果用户角色为1 ，则希望隐藏Initiate2子菜单

如果用户角色为2 ，则隐藏Prepaid菜单

任何人都可以帮助我实现这一目标吗？

Answer 1

第一个问题是为什么服务器发送不可用的菜单选项？ 首先否定服务器这样做的任何理由； 节省精力、数据和 CPU 周期，只保留整个 UI 端。

所以，第一个答案是不要触摸 UI 并在服务器端适当地过滤它。

第二个答案是根据您的需要应用过滤。

我假设order与用户角色有关？ 1/2 与您所说的匹配。

第一：更改命名。 Order.=访问控制。 这很混乱。 Order建议此菜单在屏幕上的显示顺序，与显示或隐藏任何内容无关。

第二：仅包含用户有权访问的内容——获取基本菜单项，然后仅拉出用户可以看到的内容：

注意：为此，我将更改对象的形状——我不关心order ，但我关心requiresRole以便用户能够看到它……

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.userMenu应该包含符合具有相关所需角色的用户的所有菜单和子菜单项。