前言
在看本篇文章之前首先要了解熟悉vue-admin-template模板勾扭。
什么是vue-admin-template劣像？
這是一個極簡的 vue admin 管理后臺粘衬。它只包含了 Element UI & axios & iconfont & permission control & lint项玛，這些搭建后臺必要的東西妓羊。
權(quán)限控制的改造
我們按照vue-admin-template官網(wǎng)運行代碼會看到以下頁面
由于沒有寫后端接口，我們?nèi)珯?quán)用項目中的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è)我登陸不同的角色粮彤，能夠獲得到不同的路由，這樣不就實現(xiàn)動態(tài)權(quán)限的管理了姜骡。要想實現(xiàn)動態(tài)路由导坟，我們只需要實現(xiàn)路由是在登陸之后請求到的，這樣的話圈澈，實際開發(fā)中惫周，我們只需要在登錄之后調(diào)用后端接口，給后端傳送過去roleId康栈，后端反不同路由過來递递，就行了，實際需要動態(tài)的路由我們存儲在數(shù)據(jù)庫中谅将，至于后端的邏輯漾狼，只需要后端根據(jù)你傳送的不同角色，或者后端從session中取到用戶信息饥臂，給你返回不同的路由就行逊躁。
這里我比較懶，也就沒有新建頁面隅熙，直接拿router.js中的form的路由去掉
頁面菜單顯示
此時頁面顯示缺少form稽煤，我們把form作為動態(tài)路由添加進來。我們觀察到路由共有的元素有：
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)境引用
注意事項：
后端返回的children中的component與組件中的文件夾和文件名一直，這樣在_import方法中才能引用的到分飞，否則會報錯悴务。Layout組件以字符串返回在filterAsyncRouter方法中會做出映射。
以上是全部動態(tài)路由權(quán)限的介紹譬猫，如果有不清楚的讯檐，代碼已經(jīng)傳到碼云上：https://gitee.com/jackmingming/vue-demo，歡迎大家參考染服。
手寫不易别洪，希望大家給個關(guān)注，給個贊肌索！謝謝蕉拢！
