iview-admin是一個基於vue和iview組件庫實現的管理後臺前端，本文基於iview-admin最新版本，實現基於權限的動態路由加載。
本文代碼可參見：https://github.com/MayBeWrong...
背景：
動態路由：vue的路由，可通過new Router傳入路由數組定義實現，也可以通過router.addRoutes實現。通過router.addRoutes動態傳入路由定義的方式，稱之爲動態路由。路由數據可以全部保存在後臺數據庫中，也可以將路由配置在前端，後端返回給前端路由權限信息，然後匹配過濾，進行加載。本文就這兩種方式分別進行介紹，並且給出實現參考。
目標：
基於iview-admin最新代碼，實現兩種不同的路由動態加載方式：
- 路由(導航菜單)數據全部存儲在後臺
- 路由數據配置在前端，後臺只存儲權限信息
注意：本文通過Mock模擬後端接口
方式1：路由(導航菜單)數據全部存儲在後臺
- 定義路由數據結構體,在文件中：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中增加：
export const getRouterReq = (access) => { return axios.request({ url: '/sys/routers', params: { access }, method: 'get' })}
1、在store中定義動態路由相關邏輯，修改：src/store/module/app.js
引入ajax請求：
import {getRouterReq} from '@/api/routers'
定義兩個state,如下
state: {
.....
routers: [],//拿到的路由數據
hasGetRouter: false//是否已經拿過路由數據
},
同步增加mutations：
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(() => { }) } }}
每次路由加載之前，都會判斷是否已經初始化過系統路由，如果沒有，則初始化。
至此，動態路由基本實現。文章可能有遺漏和不足,歡迎探討。第二種實現方式
具體實現，請參見： https://github.com/MayBeWrong...