# 側欄權限顯示實做

依據目前帳號打 API ，取回的後端權限資料表

{
  "list": [
    {
      "code": "Finace",
      "name": "財務部",
      "describe": "財務部專用",
      "permissionList": [
        {
          "enabled": true,
          "permission": {
            "code": "NetWorkTab",
            "title": "網路管理",
            "describe": "網路管理"
          },
          "permissionLevel2List": [
            {
              "enabled": true,
              "permission": {
                "code": "SpecialNetWork",
                "title": "專網設備",
                "describe": "專網設備(登入後預設顯示)"
              }
            },
            {
              "enabled": true,
              "permission": {
                "code": "TerminalDevice",
                "title": "終端設備",
                "describe": "終端設備"
              }
            },
            {
              "enabled": true,
              "permission": {
                "code": "Warning",
                "title": "告警通知",
                "describe": "告警通知"
              }
            }
          ]
        },
        {
          "enabled": true,
          "permission": {
            "code": "CrmTab",
            "title": "客戶管理",
            "describe": "客戶管理"
          },
          "permissionLevel2List": [
            {
              "enabled": true,
              "permission": {
                "code": "CustomerSearch",
                "title": "客戶查詢",
                "describe": "客戶查詢"
              }
            }
          ]
        },
        {
          "enabled": true,
          "permission": {
            "code": "AccountTab",
            "title": "帳號管理",
            "describe": "帳號管理"
          },
          "permissionLevel2List": [
            {
              "enabled": true,
              "permission": {
                "code": "AccountSearch",
                "title": "客戶帳號查詢",
                "describe": "客戶帳號查詢"
              }
            },
            {
              "enabled": true,
              "permission": {
                "code": "FetAccountSearch",
                "title": "遠傳帳號查詢",
                "describe": "遠傳帳號查詢"
              }
            },
            {
              "enabled": true,
              "permission": {
                "code": "GroupSearch",
                "title": "權限群組查詢",
                "describe": "權限群組查詢"
              }
            }
          ]
        },
        {
          "enabled": true,
          "permission": {
            "code": "FieldTab",
            "title": "場域維護",
            "describe": "場域維護"
          },
          "permissionLevel2List": [
            {
              "enabled": true,
              "permission": {
                "code": "FieldManage",
                "title": "維護作業通報設定",
                "describe": "維護作業通報設定"
              }
            }
          ]
        },
        {
          "enabled": true,
          "permission": {
            "code": "FieldManageTab",
            "title": "場域管理",
            "describe": "場域管理"
          },
          "permissionLevel2List": [
            {
              "enabled": true,
              "permission": {
                "code": "FieldMaintain",
                "title": "場域管理",
                "describe": "場域管理"
              }
            }
          ]
        }
      ]
    }
  ]
}

**在前端建立一份相同結構的 menuMapItems 驗證可以遍歷出 enable: true 的物件**

原先前端資料結構

const menuMapItems = [
	{
	    name: '網路管理',
	    children: [
	      { name: 'EquipmentPrivateNetwork', enable: true }, // 專網設備
	      { name: 'EquipmentTerminal', enable: true }, // 終端設備
	      { name: 'AlarmNotification', enable: false } // 告警通知
	    ]
	}
]

嘗試改為後端資料結構

const menuMapItems = [
	{
	    name: '網路管理',
	    children: [
	      {
	        enable: true,
	        permission: { name: 'EquipmentPrivateNetwork' }
	      },
	      {
	        enable: true,
	        permission: { name: 'EquipmentTerminal' }
	      },
	      {
	        enable: true,
	        permission: { name: 'AlarmNotification' }
	      }
	    ]
	}
]

但執行下方邏輯後無內容顯示

const getMenuItem = (menuMapItems) => {
  const results = []

  for (const menuMapItem of menuMapItems) {
    const route = config.find(x => x.name === menuMapItem.name)

    const result = {
      title: route.meta.metaInfo.title,
      icon: menuMapItem.icon ?? 'mdi-view-dashboard',
      to: route.path
    }

    if (
      menuMapItem.children !== undefined &&
      menuMapItem.name !== undefined
    ) {

      result.title = route.meta.metaInfo.title

      result.children = getMenuItem(menuMapItem.children)
    }
    if (menuMapItem.enable !== undefined && !menuMapItem.enable) {
      continue
    }
    results.push(result)
  }

  return results
}


export const config = [
  {
    path: '/',
    redirect: 'private-network-equipment'
  },
  { // 群組名稱
    name: '網路管理',
    meta: {
      metaInfo: {
        title: '網路管理'
      }
    },
    path: ''
  },
  {
    name: 'EquipmentPrivateNetwork',
    meta: {
      metaInfo: {
        title: '專網網路設備'
      }
    },
    path: '/private-network-equipment'
  },
  {
    name: 'EquipmentTerminal',
    meta: {
      metaInfo: {
        title: '終端設備'
      }
    },
    path: '/terminal-equipment'
  },
  {
    name: 'AlarmNotification',
    meta: {
      metaInfo: {
        title: '告警通知'
      }
    },
    path: '/alarm-notification'
  },
  {
    name: 'ClientSearch',
    meta: {
      metaInfo: {
        title: '客戶查詢'
      }
    },
    path: '/client-search'
  },
  { // 群組名稱
    name: '帳號管理',
    meta: {
      metaInfo: {
        title: '帳號管理'
      }
    },
    path: ''
  },
  {
    name: 'AccountClientSearch',
    meta: {
      metaInfo: {
        title: '客戶帳號查詢'
      }
    },
    path: '/account-customer-search'
  },
  {
    name: 'AccountFetSearch',
    meta: {
      metaInfo: {
        title: '遠傳帳號查詢'
      }
    },
    path: '/account-fet-search'
  },
  {
    name: 'AccountGroupPermissionSearch',
    meta: {
      metaInfo: {
        title: '權限群組查詢'
      }
    },
    path: '/account-group-permission-search'
  },
  {
    name: 'MaintenanceWorkNotificationSettings',
    meta: {
      metaInfo: {
        title: '維護作業通報設定'
      }
    },
    path: '/maintenance-work-notification-settings'
  },
  {
    name: 'FieldManagement',
    meta: {
      metaInfo: {
        title: '場域管理'
      }
    },
    path: '/field-management'
  }
]

export default config