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應該包含符合具有相關所需角色的用戶的所有菜單和子菜單項。