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

在我開發的很多系統里面，包括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）--- 功能點管理及權限控制

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/34093.html

標籤：Html/Css

上一篇：關于瀏覽器兼容問題

下一篇：BFC是個啥？