按部就班VUE+Element 前端應用開發(3）--- 動態菜單和路由的關聯處理

在我開發的不少系統裏面，包括Winform混合框架、Bootstrap開發框架等系列產品中，我都傾向於動態配置菜單，並管理對應角色的菜單權限和頁面權限，實現系統對用戶權限的控制，菜單通常包括有名稱、圖標、順序、URL鏈接等相關信息，對於VUE+Element 前端應用來講，應該原理上差很少，本篇隨筆介紹結合服務端的動態菜單配置和本地路由的關聯處理，實現動態菜單的維護和展現的處理。

一、菜單和路由的處理過程

因爲Vue前端還須要引入路由這個概念，路由是咱們前端能夠訪問到的對應路徑集合，路由定義了常規菜單說沒有的不少複雜信息，可是每每這些是咱們不能隨意修改的，所以咱們作法是以本地配置好的路由列表爲基準，而菜單咱們採用在後盾配置方式，前端經過接口動態獲取菜單列表，經過菜單的名稱和路由名稱的對應關係，咱們以菜單集合爲對照，而後過濾本地全部靜態路由的列表，而後得到用戶能夠訪問的路由列表，設置動態路由給前端，從而實現了界面根據用戶角色/權限的不一樣，而變化用戶的菜單界面和可訪問路由集合。

菜單路由處理的大概的操做過程以下所示

 

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

在前端界面處理中，咱們經過Element界面組件的方式展現動態菜單信息，並結合菜單和路由的關係，實現菜單跳轉到對應視圖的處理過程。

二、菜單和路由列表

根據前面的介紹，咱們定義了一些從服務端返回的動態菜單信息，這些菜單信息是一個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頁面，由於路由沒有。

三、登陸的過程處理

 前面大概介紹了路由的處理過程，其實咱們路由信息，應該須要從登陸界面開始講起。

 以登陸界面爲例，在用戶登陸處理後，須要先驗證用戶的帳號密碼，成功後繼續請求該用戶對應的動態菜單集合，並經過路由切換到對應的頁面或者首頁。

  在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界面組件的方式展現動態菜單信息，並結合菜單和路由的關係，實現菜單跳轉到對應視圖的處理過程。

咱們來看看界面生成的動態菜單效果。

  因爲菜單動態展現和動態路由配合，所以既能在前端實現動態菜單的展現，又會根據菜單的集合刷新可訪問路由，二者結合就能夠順利打開對應的視圖頁面了。

再來回顧一下，菜單路由處理的大概的操做過程以下所示