在我開發的很多系統里面，包括Winform混合框架、Bootstrap開發框架等系列產品中，我都傾向於動態配置菜單，並管理對應角色的菜單權限和頁面權限，實現系統對用戶權限的控制，菜單一般包括有名稱、圖標、順序、URL連接等相關信息，對於VUE+Element 前端應用來說，應該原理上差不多，本篇隨筆介紹結合服務端的動態菜單配置和本地路由的關聯處理，實現動態菜單的維護和展示的處理。
1、菜單和路由的處理過程
由於Vue前端還需要引入路由這個概念，路由是我們前端可以訪問到的對應路徑集合，路由定義了常規菜單說沒有的很多復雜信息，但是往往這些是我們不能隨意修改的，因此我們做法是以本地配置好的路由列表為基准，而菜單我們采用在后盾配置方式，前端通過接口動態獲取菜單列表，通過菜單的名稱和路由名稱的對應關系，我們以菜單集合為對照，然后過濾本地所有靜態路由的列表，然后獲得用戶可以訪問的路由列表，設置動態路由給前端，從而實現了界面根據用戶角色/權限的不同，而變化用戶的菜單界面和可訪問路由集合。
菜單路由處理的大概的操作過程如下所示
前端界面的動態菜單、本地路由、菜單導航和可訪問路由的幾個概念如下所示。
在前端界面處理中，我們通過Element界面組件的方式展示動態菜單信息，並結合菜單和路由的關系，實現菜單跳轉到對應視圖的處理過程。
2、菜單和路由列表
根據前面的介紹，我們定義了一些從服務端返回的動態菜單信息，這些菜單信息是一個JSON對象集合，如下界面所示。
[ { id: '1', pid: '-1', text: '首頁', icon: 'dashboard', name: 'dashboard' }, { id: '2', pid: '-1', text: '產品列表', icon: 'table', name: 'product' }, { id: '3', pid: '-1', text: '一級菜單', icon: 'example', children: [ { id: '3-1', pid: '3', text: '二級菜單1', name: 'icon', icon: 'example' }, { id: '3-2', pid: '3', text: '二級菜單2', icon: 'tree', children: [ { id: '3-2-1', pid: '3-2', text: '三級菜單1', name: 'form', icon: 'form' }, { id: '3-2-2', pid: '3-2', text: '三級菜單2', name: 'menu1-1', icon: 'form' }, { id: '3-2-3', pid: '3-2', text: '三級菜單3', name: 'menu1-2', icon: 'form' }, { id: '3-2-4', pid: '3-2', text: '三級菜單4', name: 'menu1-3', icon: 'form' } ] } ] }, { id: '99', pid: '-1', text: '公司官網', icon: 'table', name: 'external-link' } ]
菜單的JSON是根據角色進行動態獲取的，不同的角色對應不同的菜單集合，並且菜單是一個多層次的樹列表，可以定義無窮多級的展示，JSON格式化視圖如下所示。
而Vue前端需要初始化定義前端頁面的所有路由，這些包括路由頁面的Layout等信息。
我們可以在一個JS文件里面定義好對應前端所有的路由信息，如下所示
// 定義本系統的所有路由，具體路由呈現經過菜單數據過濾 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' } }
這里的路由不需要嵌套，因為菜單展示才需要定義嵌套關系。
另外，由於系統在未登錄請求后端動態菜單前，我們系統也需要正常運行起來，那么就需要預設一些基礎的路由信息，如登錄界面、重定向頁面、首頁鏈接等這些路由信息，因此我們可以分開兩個路由對象，用來分開管理這些信息。
對路由的管理，一個需要默認創建路由的處理、重置路由的處理，以及動態設置新的路由處理，我們封裝幾個函數來處理這些操作。
const createRouter = () => new Router({ // mode: 'history', // require service support scrollBehavior: () => ({ y: 0 }), routes: constantRoutes }) const router = createRouter() // 重置路由 export function resetRouter() { const newRouter = createRouter() router.matcher = newRouter.matcher // reset router }
用戶在經過登錄界面處理后，就會通過對應的Action獲取動態路由信息（注意，這里是先獲取動態菜單，然后過濾本地路由，即為動態路由信息），獲得動態路由后，就設置前端所能訪問的路由集合即可，如下代碼所示。
有了這些新的路由允許，前端系統的菜單才能夠正常運轉起來，否則即使界面展示了菜單，也不能訪問特定的視圖頁面而跳到了404頁面，因為路由沒有。
3、登錄的過程處理
前面大概介紹了路由的處理過程，其實我們路由信息，應該需要從登錄界面開始講起。
以登錄界面為例，在用戶登錄處理后，需要先驗證用戶的賬號密碼，成功后繼續請求該用戶對應的動態菜單集合，並通過路由切換到對應的頁面或者首頁。
在Store/Modules/user.js模塊里面，定義了對應的登陸處理Action，如下所示
我們這里忽略用戶登錄的檢驗和處理token的過程，主要關注動態菜單請求並設置路由的過程。
在我們需要攔截路由到達前的處理中，我們定義對應的路由信息請求邏輯，如下所示。
router.beforeEach(async(to, from, next) => {
在處理菜單路由的對應模塊里面，我們定義了一個狀態用來承載這些重要信息，如下定義State所示。
const state = { menuItems: [], routes: [], addRoutes: [], asyncRoutes: asyncRoutes }
// 定義了路由和菜單的Mutation const mutations = { SET_ROUTES: (state, routes) => { // var list = convertRoute(routes) routes.push({ path: '*', redirect: '/404', hidden: true }) // 此為默認錯誤路由 state.addRoutes = routes state.routes = [].concat(routes)// constantRoutes.concat(routes) }, SET_MENUS: (state, menus) => { state.menuItems = menus } }
// 定義了生成動態路由的Action處理 const actions = { generateRoutes({ commit }, roles) { return new Promise(resolve => { getMenus().then(res => { const menus = res.data || [] // 統一通過接口獲取菜單信息 const routes = [] menus.forEach(item => { filterRoutes(routes, item) }) console.log(routes)// 打印路由 commit('SET_ROUTES', routes) commit('SET_MENUS', menus) resolve(routes) }); }) } }
最后返回對應的JS定義模塊類信息即可。
export default { namespaced: true, state, mutations, actions }
在前端界面處理中，我們通過Element界面組件的方式展示動態菜單信息，並結合菜單和路由的關系，實現菜單跳轉到對應視圖的處理過程。
我們來看看界面生成的動態菜單效果。
由於菜單動態展示和動態路由配合，因此既能在前端實現動態菜單的展示，又會根據菜單的集合刷新可訪問路由，兩者結合就可以順利打開對應的視圖頁面了。
再來回顧一下，菜單路由處理的大概的操作過程如下所示
為了方便讀者理解，我列出一下前面幾篇隨筆的連接，供參考：
循序漸進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 前端應用開發(10）--- 基於vue-echarts處理各種圖表展示
循序漸進VUE+Element 前端應用開發(11）--- 圖標的維護和使用
循序漸進VUE+Element 前端應用開發(12）--- 整合ABP框架的前端登錄處理
循序漸進VUE+Element 前端應用開發(13）--- 前端API接口的封裝處理
循序漸進VUE+Element 前端應用開發(14）--- 根據ABP后端接口實現前端界面展示
循序漸進VUE+Element 前端應用開發(15）--- 用戶管理模塊的處理
循序漸進VUE+Element 前端應用開發(16）--- 組織機構和角色管理模塊的處理
循序漸進VUE+Element 前端應用開發(17）--- 菜單管理
循序漸進VUE+Element 前端應用開發(18）--- 功能點管理及權限控制
循序漸進VUE+Element 前端應用開發(19）--- 后端查詢接口和Vue前端的整合
使用代碼生成工具快速生成基於ABP框架的Vue+Element的前端界面
循序漸進VUE+Element 前端應用開發(20）--- 使用組件封裝簡化界面代碼
循序漸進VUE+Element 前端應用開發(21）--- 省市區縣聯動處理的組件使用
循序漸進VUE+Element 前端應用開發(22）--- 簡化main.js處理代碼，抽取過濾器、全局界面函數、組件注冊等處理邏輯到不同的文件中
循序漸進VUE+Element 前端應用開發(23）--- 基於ABP實現前后端的附件上傳，圖片或者附件展示管理
循序漸進VUE+Element 前端應用開發(24）--- 修改密碼的前端界面和ABP后端設置處理
循序漸進VUE+Element 前端應用開發(25）--- 各種界面組件的使用（1）
循序漸進VUE+Element 前端應用開發(26）--- 各種界面組件的使用（2）
循序漸進VUE+Element 前端應用開發(27）--- 數據表的動態表單設計和數據存儲
循序漸進VUE+Element 前端應用開發(28）--- 附件內容的管理
循序漸進VUE+Element 前端應用開發(29）--- 高級查詢條件的界面設計
部署基於.netcore5.0的ABP框架后台Api服務端，以及使用Nginx部署Vue+Element前端應用
循序漸進VUE+Element 前端應用開發(30）--- ABP后端和Vue+Element前端結合的分頁排序處理
循序漸進VUE+Element 前端應用開發(31）--- 系統的日志管理，包括登錄日志、接口訪問日志、實體變化歷史日志
循序漸進VUE+Element 前端應用開發(32）--- 手機短信動態碼登陸處理
循序漸進VUE+Element 前端應用開發(33）--- 郵件參數配置和模板郵件發送處理
使用Vue-TreeSelect組件實現公司-部門-人員級聯下拉列表的處理
使用Vue-TreeSelect組件的時候，用watch變量方式解決彈出編輯對話框界面無法觸發更新的問題