基於iview-admin實現動態路由

時間 2020-02-06

原文原文鏈接

iview-admin是一個基於vue和iview組件庫實現的管理後臺前端，本文基於iview-admin最新版本，實現基於權限的動態路由加載。
本文代碼可參見：https://github.com/MayBeWrong...前端

背景：vue

動態路由：vue的路由，可經過new Router傳入路由數組定義實現，也能夠經過router.addRoutes實現。經過router.addRoutes動態傳入路由定義的方式，稱之爲動態路由。路由數據能夠所有保存在後臺數據庫中，也能夠將路由配置在前端，後端返回給前端路由權限信息，而後匹配過濾，進行加載。本文就這兩種方式分別進行介紹，而且給出實現參考。webpack

目標：
基於iview-admin最新代碼，實現兩種不一樣的路由動態加載方式：ios

路由(導航菜單)數據所有存儲在後臺
路由數據配置在前端，後臺只存儲權限信息

注意：本文經過Mock模擬後端接口

方式1：路由(導航菜單)數據所有存儲在後臺git

定義路由數據結構體,在文件中：src/mock/data.js

export const routersData = [{
      path: '/pet',//訪問路徑
      name: 'Pet',//路由的名字，這個與i18n有關，須要惟一
      meta: {
        title: '寵物',//標題
        hideInMenu: false,//是否在左側導航菜單隱藏
        icon: 'logo-freebsd-devil'//圖標
      },
      component: 'components/main',//組件文件路徑，不須要Import
      children: [{//嵌套路由
        path: 'cat',
        name: 'Cat',
        meta: {
          title: '貓咪',
          hideInMenu: false,
          icon: 'ios-cloudy-night'
        },
        component: 'view/pet/cat/Cat.vue'
      }, {
        path: 'dog',
        name: 'Dog',
        meta: {
          hideInMenu: false,
          title: '狗娃',
          icon: 'ios-color-filter'
        },
        component: 'view/pet/dog/Dog.vue'
      }, {
        path: 'pig',
        name: 'Pig',
        meta: {
          hideInMenu: false,
          title: '豬啊',
          icon: 'ios-contact'
        },
        component: 'view/pet/pig/Pig.vue',
        children: [
          {
            path: 'female',
            name: 'Female',
            meta: {
              hideInMenu: false,
              title: '母豬',
              icon: 'ios-contact'
            },
            component: 'view/pet/pig/Pig.vue',
          },
          {
            path: 'male',
            name: 'Male',
            meta: {
              hideInMenu: false,
              title: '公豬',
              icon: 'ios-contact'
            },
            component: 'view/pet/pig/Pig.vue',
          }
        ]
      }]}]

暴露ajax調用接口:src/mock/index.js，中增長：

Mock.mock(/\/sys\/routers/, routersData)

實現一個ajax調用：src/api/routers.js中增長：github

export const getRouterReq = (access) => {
     return axios.request({
       url: '/sys/routers',
       params: {
         access
       },
       method: 'get'
 })}

一、在store中定義動態路由相關邏輯，修改：src/store/module/app.jsweb

引入ajax請求：ajax

import {getRouterReq} from '@/api/routers'

定義兩個state,以下數據庫

state: {
   .....
    routers: [],//拿到的路由數據
    hasGetRouter: false//是否已經拿過路由數據
  },

同步增長mutations：axios

mutations：{
     ......
     //設置路由數據
    setRouters(state, routers) {
      state.routers = routers
    },
    //設置是否已經拿過路由
    setHasGetRouter(state, status) {
      state.hasGetRouter = status
    }......}

增長一個action：

action:{
........
    getRouters({commit}) {
      return new Promise((resolve, reject) => {
        try {
          getRouterReq().then(res => {
            let routers = backendMenusToRouters(res.data)
            commit('setRouters', routers)
            commit('setHasGetRouter', true)
            resolve(routers)
          }).catch(err => {
            reject(err)
          })
        } catch (error) {
          reject(error)
        }
      })
    },
    ........
}

此處用到了一個函數：backendMenusToRouters，這個函數定義在src/libs/util.js中，用來對後端返回的路由數據遞歸處理，行程vue的路由。

export const backendMenusToRouters = (menus) => {
  let routers = []
  forEach(menus, (menu) => {
    // 將後端數據轉換成路由數據
    let route = backendMenuToRoute(menu)
    // 若是後端數據有下級，則遞歸處理下級
    if (menu.children && menu.children.length !== 0) {
      route.children = backendMenusToRouters(menu.children)
    }
    routers.push(route)
  })
  return routers
}

修改src/router/index.js，增長動態路由加入邏輯，主要方法：

const initRouters = (store) => {
 //這我的登陸了已經
 if (store.state.user.hasGetInfo) {
   //路由加載過了
   if (store.state.app.hasGetRouter && store.state.app.routers && store.state.app.routers.length > 0) {
     console.log("已經加載過了路由")
   } else {
     //加載路由
     console.log("開始加載路由權限...")
     store.dispatch('getUserMenus').then(routers => {
       //此處routers已是按照權限過濾後的路由了，沒權限的，不加入路由，沒法訪問
       //路由重置一下把404放最後
       const newRouter = new Router({
         routes,
         mode: config.routerModel
       })
       router.matcher = newRouter.matcher;
       //把404加最後面，若是用router.push({name:'xxxx'})這種的話，404頁面可能空白，用path:'/aa/bb'
       router.addRoutes(routers.concat([{
         path: '*',
         name: 'error_404',
         meta: {
           hideInMenu: true
         },
         component: () => import(/* webpackChunkName: "404" */'@/view/error-page/404.vue')
       }]))
     }).finally(() => {
     })
   }
 }}