前言
在看本篇文章之前首先要了解熟悉vue-admin-template模板。
什么是vue-admin-template？
這是一個極簡的 vue admin 管理后臺。它只包含了 Element UI & axios & iconfont & permission control & lint，這些搭建后臺必要的東西。
權(quán)限控制的改造
我們按照vue-admin-template官網(wǎng)運(yùn)行代碼會看到以下頁面
由于沒有寫后端接口，我們?nèi)珯?quán)用項(xiàng)目中的mock，模擬后端接口請求，我們在mock文件夾下的user.js會看到系統(tǒng)設(shè)置了兩個登陸人，一個admin，一個editor，我們模擬添加一個新的用戶limm
添加完用戶之后，我們就要想，動態(tài)權(quán)限分配，就是我們用不同的角色登陸，會有不同的菜單。比如系統(tǒng)管理員，會有人員管理的權(quán)限、業(yè)務(wù)管理員，會有業(yè)務(wù)管理的權(quán)限。
首先我們得研究一下頁面中登陸之后菜單的顯示
我們在這個層級目錄下
看到菜單是根據(jù)路由取循環(huán)出來的
看到這里，大概思路就出來了，假設(shè)我登陸不同的角色，能夠獲得到不同的路由，這樣不就實(shí)現(xiàn)動態(tài)權(quán)限的管理了。要想實(shí)現(xiàn)動態(tài)路由，我們只需要實(shí)現(xiàn)路由是在登陸之后請求到的，這樣的話，實(shí)際開發(fā)中，我們只需要在登錄之后調(diào)用后端接口，給后端傳送過去roleId，后端反不同路由過來，就行了，實(shí)際需要動態(tài)的路由我們存儲在數(shù)據(jù)庫中，至于后端的邏輯，只需要后端根據(jù)你傳送的不同角色，或者后端從session中取到用戶信息，給你返回不同的路由就行。
這里我比較懶，也就沒有新建頁面，直接拿router.js中的form的路由去掉
頁面菜單顯示
此時頁面顯示缺少form，我們把form作為動態(tài)路由添加進(jìn)來。我們觀察到路由共有的元素有：
path， component，name，meta，children這五個元素所以我們就mock按照注釋掉form路由定義的路由去造一下數(shù)據(jù)，代碼我粘貼如下：
const Mock = require('mockjs')
const data = Mock.mock({
'dataList': [{
path: '/form',
component: 'Layout',
name:'Corm',
meta:{},
children: [{
path: 'index',
name: 'Form',
component: '/form/index',
meta: {
title: 'Form',
icon: 'form'
},
children:null
}]
}]
})
module.exports = [
? {
? ? url: '/vue-admin-template/router/list',
? ? type: 'get',
? ? response: config => {
? ? ? const items = data.dataList
? ? ? return {
? ? ? ? code: 20000,
? ? ? ? data: {
? ? ? ? ? total: items.length,
? ? ? ? ? dataList: items
? ? ? ? }
? ? ? }
? ? }
? }
]
然后我們在store/modules/user添加state.routerList，我們將獲取的動態(tài)路由存儲在store中。
api/user：
登陸之后，在permission.js中調(diào)用獲取動態(tài)路由
const menus = filterAsyncRouter(store.getters.routerList) // 1.過濾路由
router.addRoutes(menus) // 2.動態(tài)添加路由
global.antRouter = menus // 3.將路由數(shù)據(jù)傳遞給全局變量，做側(cè)邊欄菜單渲染工作
_import方法：
在router文件夾下創(chuàng)建文件：
根據(jù)不同的環(huán)境引用
注意事項(xiàng)：
后端返回的children中的component與組件中的文件夾和文件名一直，這樣在_import方法中才能引用的到，否則會報錯。Layout組件以字符串返回在filterAsyncRouter方法中會做出映射。
以上是全部動態(tài)路由權(quán)限的介紹，如果有不清楚的，代碼已經(jīng)傳到碼云上：https://gitee.com/jackmingming/vue-demo，歡迎大家參考。
手寫不易，希望大家給個關(guān)注，給個贊！謝謝！
