循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(3）--- 動態(tài)菜單和路由的關(guān)聯(lián)處理

在我開發(fā)的很多系統(tǒng)里面兜粘，包括Winform混合框架、Bootstrap開發(fā)框架等系列產(chǎn)品中弯蚜，我都傾向于動態(tài)配置菜單孔轴，并管理對應(yīng)角色的菜單權(quán)限和頁面權(quán)限，實(shí)現(xiàn)系統(tǒng)對用戶權(quán)限的控制碎捺，菜單一般包括有名稱路鹰、圖標(biāo)、順序收厨、URL連接等相關(guān)信息晋柱，對于VUE+Element 前端應(yīng)用來說，應(yīng)該原理上差不多诵叁，本篇隨筆介紹結(jié)合服務(wù)端的動態(tài)菜單配置和本地路由的關(guān)聯(lián)處理雁竞，實(shí)現(xiàn)動態(tài)菜單的維護(hù)和展示的處理。

1拧额、菜單和路由的處理過程

由于Vue前端還需要引入路由這個概念碑诉，路由是我們前端可以訪問到的對應(yīng)路徑集合，路由定義了常規(guī)菜單說沒有的很多復(fù)雜信息侥锦，但是往往這些是我們不能隨意修改的进栽，因此我們做法是以本地配置好的路由列表為基準(zhǔn)，而菜單我們采用在后盾配置方式恭垦，前端通過接口動態(tài)獲取菜單列表快毛，通過菜單的名稱和路由名稱的對應(yīng)關(guān)系，我們以菜單集合為對照番挺，然后過濾本地所有靜態(tài)路由的列表祸泪，然后獲得用戶可以訪問的路由列表，設(shè)置動態(tài)路由給前端建芙，從而實(shí)現(xiàn)了界面根據(jù)用戶角色/權(quán)限的不同，而變化用戶的菜單界面和可訪問路由集合懂扼。

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

image

前端界面的動態(tài)菜單禁荸、本地路由、菜單導(dǎo)航和可訪問路由的幾個概念如下所示阀湿。

image

在前端界面處理中赶熟，我們通過Element界面組件的方式展示動態(tài)菜單信息，并結(jié)合菜單和路由的關(guān)系陷嘴，實(shí)現(xiàn)菜單跳轉(zhuǎn)到對應(yīng)視圖的處理過程映砖。

image

2、菜單和路由列表

根據(jù)前面的介紹灾挨，我們定義了一些從服務(wù)端返回的動態(tài)菜單信息邑退，這些菜單信息是一個JSON對象集合竹宋，如下界面所示。

[
  {
    id: '1',
    pid: '-1',
    text: '首頁',
    icon: 'dashboard',
    name: 'dashboard'
  },
  {
    id: '2',
    pid: '-1',
    text: '產(chǎn)品列表',
    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: '公司官網(wǎng)',
    icon: 'table',
    name: 'external-link'
  }
]

菜單的JSON是根據(jù)角色進(jìn)行動態(tài)獲取的地技，不同的角色對應(yīng)不同的菜單集合蜈七，并且菜單是一個多層次的樹列表，可以定義無窮多級的展示莫矗，JSON格式化視圖如下所示飒硅。

image

而Vue前端需要初始化定義前端頁面的所有路由，這些包括路由頁面的Layout等信息作谚。

我們可以在一個JS文件里面定義好對應(yīng)前端所有的路由信息三娩，如下所示

// 定義本系統(tǒng)的所有路由，具體路由呈現(xiàn)經(jīng)過菜單數(shù)據(jù)過濾
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'
  }
}

這里的路由不需要嵌套妹懒，因?yàn)椴藛握故静判枰x嵌套關(guān)系雀监。

另外，由于系統(tǒng)在未登錄請求后端動態(tài)菜單前彬伦，我們系統(tǒng)也需要正常運(yùn)行起來滔悉，那么就需要預(yù)設(shè)一些基礎(chǔ)的路由信息，如登錄界面单绑、重定向頁面回官、首頁鏈接等這些路由信息，因此我們可以分開兩個路由對象搂橙，用來分開管理這些信息歉提。

image

對路由的管理，一個需要默認(rèn)創(chuàng)建路由的處理区转、重置路由的處理苔巨，以及動態(tài)設(shè)置新的路由處理，我們封裝幾個函數(shù)來處理這些操作废离。

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
}

用戶在經(jīng)過登錄界面處理后侄泽，就會通過對應(yīng)的Action獲取動態(tài)路由信息（注意，這里是先獲取動態(tài)菜單蜻韭，然后過濾本地路由悼尾，即為動態(tài)路由信息），獲得動態(tài)路由后肖方，就設(shè)置前端所能訪問的路由集合即可闺魏，如下代碼所示。

image

有了這些新的路由允許俯画，前端系統(tǒng)的菜單才能夠正常運(yùn)轉(zhuǎn)起來析桥，否則即使界面展示了菜單，也不能訪問特定的視圖頁面而跳到了404頁面，因?yàn)槁酚蓻]有泡仗。

3埋虹、登錄的過程處理

前面大概介紹了路由的處理過程，其實(shí)我們路由信息沮焕，應(yīng)該需要從登錄界面開始講起吨岭。

image.png

以登錄界面為例糯累，在用戶登錄處理后漩仙，需要先驗(yàn)證用戶的賬號密碼，成功后繼續(xù)請求該用戶對應(yīng)的動態(tài)菜單集合忧便，并通過路由切換到對應(yīng)的頁面或者首頁魁巩。

image.png

在Store/Modules/user.js模塊里面急灭，定義了對應(yīng)的登陸處理Action，如下所示

image

我們這里忽略用戶登錄的檢驗(yàn)和處理token的過程谷遂，主要關(guān)注動態(tài)菜單請求并設(shè)置路由的過程葬馋。

在我們需要攔截路由到達(dá)前的處理中，我們定義對應(yīng)的路由信息請求邏輯肾扰，如下所示畴嘶。

router.beforeEach(async(to, from, next) => {

image

在處理菜單路由的對應(yīng)模塊里面，我們定義了一個狀態(tài)用來承載這些重要信息集晚，如下定義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 }) // 此為默認(rèn)錯誤路由

    state.addRoutes = routes
    state.routes = [].concat(routes)// constantRoutes.concat(routes)
  },
  SET_MENUS: (state, menus) => {
    state.menuItems = menus
  }
}


// 定義了生成動態(tài)路由的Action處理
const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      getMenus().then(res => {
        const menus = res.data || [] // 統(tǒng)一通過接口獲取菜單信息
        const routes = []

        menus.forEach(item => {
          filterRoutes(routes, item)
        })
        console.log(routes)// 打印路由

        commit('SET_ROUTES', routes)
        commit('SET_MENUS', menus)
        resolve(routes)
      });
    })
  }
}

最后返回對應(yīng)的JS定義模塊類信息即可。

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

在前端界面處理中偷拔，我們通過Element界面組件的方式展示動態(tài)菜單信息蒋院，并結(jié)合菜單和路由的關(guān)系，實(shí)現(xiàn)菜單跳轉(zhuǎn)到對應(yīng)視圖的處理過程莲绰。

image

我們來看看界面生成的動態(tài)菜單效果欺旧。

image

由于菜單動態(tài)展示和動態(tài)路由配合，因此既能在前端實(shí)現(xiàn)動態(tài)菜單的展示蛤签，又會根據(jù)菜單的集合刷新可訪問路由辞友，兩者結(jié)合就可以順利打開對應(yīng)的視圖頁面了。

再來回顧一下震肮，菜單路由處理的大概的操作過程如下所示

image

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

循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(1）--- 開發(fā)環(huán)境的準(zhǔn)備工作

循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(2）--- Vuex中的API钙蒙、Store和View的使用

循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(3）--- 動態(tài)菜單和路由的關(guān)聯(lián)處理

循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(4）--- 獲取后端數(shù)據(jù)及產(chǎn)品信息頁面的處理

循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(5）--- 表格列表頁面的查詢，列表展示和字段轉(zhuǎn)義處理

循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(6）--- 常規(guī)Element 界面組件的使用

循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(7）--- 介紹一些常規(guī)的JS處理函數(shù)

循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(8）--- 樹列表組件的使用

循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(9）--- 界面語言國際化的處理

循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(10）--- 基于vue-echarts處理各種圖表展示

循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(11）--- 圖標(biāo)的維護(hù)和使用

循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(12）--- 整合ABP框架的前端登錄處理

循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(13）--- 前端API接口的封裝處理

循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(14）--- 根據(jù)ABP后端接口實(shí)現(xiàn)前端界面展示

循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(15）--- 用戶管理模塊的處理

循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(16）--- 組織機(jī)構(gòu)和角色管理模塊的處理

循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(17）--- 菜單管理

循序漸進(jìn)VUE+Element 前端應(yīng)用開發(fā)(18）--- 功能點(diǎn)管理及權(quán)限控制