在許可權管理系統中，選單也屬於許可權控制的一個資源，應該直接應用於角色，和許可權功能點一樣，屬於角色控制的一環。不同角色使用者，登入系統後，出現的系統選單是不同的。在VUE+Element 前端中，我們選單結合路由集合，實現可訪問路由的過濾，也就實現了對應角色選單的展示和可訪問路由的控制，詳細可以參考隨筆《循序漸進VUE+Element 前端應用開發(3）--- 動態選單和路由的關聯處理》，本篇隨筆主要介紹選單管理模組的介面和相關的實現邏輯。

1、選單資源及管理介面介紹

前面介紹過，許可權管理一般都會涉及到使用者、組織機構、角色，以及許可權功能等方面的內容，ABP框架的基礎內容也是涉及到這幾方面的內容，其中它們之間的關係基本上是多對多的關係，它們的關係如下所示。

加入選單資源，以及整理它們之間的關係和表的資訊，整理圖示如下。

 結合ABP後端提供的介面，Vue前端我們要實現基礎的使用者、組織機構、角色、功能許可權等內容的管理，以及維護它們之間的關係。Vue前端對於許可權管理模組的選單列表如下所示。

選單列表管理介面如下圖所示，主要包括樹狀列表展示選單結構，以及具體的選單列表查詢處理。

選單檢視明細介面如下所示，主要就是簡單展示選單相關的屬性資料。

  而選單的編輯或新增介面，需要考慮從已有選單中選擇列表，以及選擇圖示資訊。

 其中的Awesome圖示，我們封裝了選擇圖示的元件，只從Font Awesome圖示中選擇，畢竟自帶的Element圖示太少，不太滿足要求。

關於Awesome圖示元件的使用，可以參考下之前我寫過的隨筆《循序漸進VUE+Element 前端應用開發(11）--- 圖示的維護和使用》。

其中的Web圖示選擇控制元件，是根據e-icon-picker控制元件進行修改，以採用Font Awesome圖示集合的處理

// Vue-Awesome圖示自動加入
const req = require.context('vue-awesome/icons', true, /\.js$/)
const requireAll = requireContext => requireContext.keys()
const re = /\.\/(.*)\.js/
const fontAwesome = requireAll(req).filter((key) => {
  return key.indexOf('index.js') < 0
}).map(i => {
  return i.match(re)[1]
})

 選單的展示我們也根據配置，從Awesome中選擇構建選單的圖示專案即可。

選單項的元件，是在Layout/Components/Sidebar/Item.vue進行修改，以適應Awesome圖示的處理

  render(createElement, context) {
    const { icon, title } = context.props
    const vnodes = []

    if (icon) {
      // vnodes.push(<svg-icon icon-class={icon} />) // 使用自定義svg圖示
      // vnodes.push(<i class={icon}/>) // 使用內建element圖示
      vnodes.push(<v-icon name={icon} scale='1.1' style='padding-right:3px'/>)// 使用awesome圖示
    }

    if (title) {
      vnodes.push(<span slot='title'>{(title)}</span>)
    }
    return vnodes
  }

通過各個地方進行修改，我們就可以使用Awesome的圖示集合了。

2、選單和路由的結合管理

 在前面隨筆《循序漸進VUE+Element 前端應用開發(3）--- 動態選單和路由的關聯處理》我介紹了使用者動態配置的選單資源，結合本系統的所有路由，實現選單的顯示外，還過濾了系統路由，實現可訪問路由的管理，兩者結合實現了系統有效的選單和路由的控制。

前端通過介面動態獲取選單列表，通過選單的名稱和路由名稱的對應關係，我們以選單集合為對照，然後過濾本地所有靜態路由的列表，然後獲得使用者可以訪問的路由列表，設定動態路由給前端，從而實現了介面根據使用者角色/許可權的不同，而變化使用者的選單介面和可訪問路由集合。

選單路由處理的大概的操作過程如下所示

 前端介面的動態選單、本地路由、選單導航和可訪問路由的幾個概念如下所示。

在前端介面處理中，我們通過Element介面元件的方式展示動態選單資訊，並結合選單和路由的關係，實現選單跳轉到對應檢視的處理過程。

因此，系統管理裡面的選單資訊配置介面中，選單的Web地址，對應的是系統靜態路由的名稱，如下介面所示。

  之前定義系統的路由資訊格式如下所示

// 定義本系統的所有路由，具體路由呈現經過選單資料過濾
export const asyncRoutes = {
  'dashboard': {
    path: '/dashboard',
    component: Layout,
    children: [{
      path: 'dashboard',
      name: 'dashboard',
      component: () => import('@/views/dashboard/index')
    }]
  },
  'product': {
    path: '/product',
    component: Layout,
    children: [{
      path: '/product',
      name: 'product',
      component: () => import('@/views/Product/index')
    }]
  },

  .............................. //省略部分

  'icon': {
    path: '/icon',
    component: Layout,
    children: [{
      path: '/icon',
      name: 'icon',
      component: () => import('@/views/icons/index')
    }]
  },

  'external-link': {
    path: 'http://www.iqidi.com',
    name: 'external-link'
  }
}

有了這些準備，我們在使用者登入系統後，就從後臺獲取對應的選單列表。

在系統登入處理過程中，考慮到初始化的時候，如果使用者是管理員admin，並且獲取使用者選單為空，可以考慮使用預設的靜態選單資源，可以讓使用者先配置好許可權選單。

    // 系統靜態選單
    var staticmenus = await GetStaticMenus()
    // console.log(menus)

    // 如果使用者是admin 並且角色集合中沒有選單，則使用靜態選單
    var username = store.getters.name // 使用者名稱
    if (username === 'admin') {
      if (!menus || typeof (menus) === 'undefined' || menus.length === 0) {
        menus = staticmenus // 系統管理員，初始化的時候使用靜態選單
      }
    }

由於之前開發了一個基於Winform的ABP前端應用，因此我們選單為了整合兩個應用，在選單表示增加一個一個Tag標籤，用來區分是Winform介面的選單還是Web的選單，畢竟兩者選單的處理方式是不同的。

      addForm: { // 新增表單
        id: this.guid(),
        pid: '',
        name: '',
        url: '',
        seq: '001',
        isTop: false,
        expand: 1,
        visible: 1,
        webIcon: '',
        tag: 'web'// Web專用
      },

WInform客戶端的選單也是從伺服器端請求資料，並動態構建的，Winform端的選單展示效果如下所示。

為了方便讀者理解，我列出一下前面幾篇隨筆的連線，供參考：

循序漸進VUE+Element 前端應用開發(1）--- 開發環境的準備工作

循序漸進VUE+Element 前端應用開發(2）--- Vuex中的API、Store和View的使用

循序漸進VUE+Element 前端應用開發(3）--- 動態選單和路由的關聯處理

循序漸進VUE+Element 前端應用開發(4）--- 獲取後端資料及產品資訊頁面的處理

循序漸進VUE+Element 前端應用開發(5）--- 表格列表頁面的查詢，列表展示和欄位轉義處理

循序漸進VUE+Element 前端應用開發(6）--- 常規Element 介面元件的使用

循序漸進VUE+Element 前端應用開發(7）--- 介紹一些常規的JS處理函式

循序漸進VUE+Element 前端應用開發(8）--- 樹列表元件的使用

循序漸進VUE+Element 前端應用開發(9）--- 介面語言國際化的處理

循序漸進VUE+Element 前端應用開發(11）--- 圖示的維護和使用

循序漸進VUE+Element 前端應用開發(12）--- 整合ABP框架的前端登入處理

循序漸進VUE+Element 前端應用開發(13）--- 前端API介面的封裝處理

循序漸進VUE+Element 前端應用開發(14）--- 根據ABP後端介面實現前端介面展示

循序漸進VUE+Element 前端應用開發(15）--- 使用者管理模組的處理

循序漸進VUE+Element 前端應用開發(16）--- 組織機構和角色管理模組的處理 

循序漸進VUE+Element 前端應用開發(17）--- 選單