前言：
最近項(xiàng)目遇到一個(gè)管理系統(tǒng)，感覺權(quán)限配置挺有意思，記錄一下流程實(shí)現(xiàn)的過程，便于自己學(xué)習(xí)以及整理思路，部分思路整合在代碼的注釋中：
路由攔截鑒權(quán)常用的兩種方法
1：路由攔截：單純給路由加字段標(biāo)識符，通過路由攔截實(shí)現(xiàn)
2：動(dòng)態(tài)路由：第二種是通過路由的拆分另外需要后端的配合去實(shí)現(xiàn)的動(dòng)態(tài)路由配置
比較：
路由攔截實(shí)現(xiàn)方式比較簡單，只需要簡單的在router.beforeEach中根據(jù)路由配置信息過濾頁面是否有權(quán)限前往改組件，若相對于的權(quán)限不夠則不前往相應(yīng)的組件
動(dòng)態(tài)路由實(shí)現(xiàn)相對比較復(fù)雜，并且需要后端的配合，本質(zhì)是路由配置表分成兩部分，相應(yīng)的不同用戶登錄的時(shí)候，是根據(jù)用戶權(quán)限信息過濾篩選除路由配置表，動(dòng)態(tài)添加，而用戶沒有權(quán)限的部分則不渲染，更適合相對比較大型的后臺系統(tǒng)
注：本篇內(nèi)容主要介紹動(dòng)態(tài)路由鑒權(quán)實(shí)現(xiàn)方式
與動(dòng)態(tài)路由相關(guān)的通常有以下幾個(gè)文件：
- router.js
- permission.js(全局的路由攔截文件)
- store.js
router.js
router.js的路由配置表可以分為兩部分，公共路由以及動(dòng)態(tài)權(quán)限路由，動(dòng)態(tài)權(quán)限路由可以放在前端，鑒權(quán)的時(shí)候前端自己進(jìn)行數(shù)組的過濾，也可以放在后端過濾，思路相同，下面介紹的是配置表都放在前端的
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
export default new Router(｛ routes：[ ｛ path:'/login', name:'login', component:aa ｝， ｛ path：'/home', name:'home', component:cc ｝， ]｝) |
上面這個(gè)是一般項(xiàng)目的路由配置，現(xiàn)在我們需要做鑒權(quán)所以需要把路由配置表稍微拆分一下，拆成以下兩個(gè)數(shù)組：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export const defauleRoute = [ //固定部分權(quán)限的數(shù)組，所有用戶都能訪問的路由 ｛ path:'/login', component:aa ｝,]export const asyncRoute = [ //動(dòng)態(tài)配置的路由表，工作之前需要過濾 { path:'/order', name:'order', component:aa, meta:{ system:'order' } } { path:'/roles', name:'roles', component:aa, meta:{ system:'roles' } }]//注冊路由工作表const createRouter = () => new Router({ // mode: 'history', // require service support scrollBehavior: () => ({ y: 0 }), routes: constantRoutes})const router = createRouter()//重置路由工作表，退出登錄的時(shí)候需要調(diào)用此方法export function resetRouter() { const newRouter = createRouter() router.matcher = newRouter.matcher }export default router |
permission.js permission文件主要做全局的路由攔截，以及路由根據(jù)用戶權(quán)限動(dòng)態(tài)過濾等功能，那么這部分內(nèi)容主要設(shè)涉及的就是兩個(gè)問題 什么時(shí)候去處理動(dòng)態(tài)路由什么條件去處理路由
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
import router from './router'import store from './store'import { getToken } from '@/utils/auth' // 自定義封裝存取token的方法Route.beforeEach((to,from,next) =>{ //取token，判斷用戶是否已登錄 const hasToken = getToken() if(hasToken ){ //判斷用戶已登錄 if（to.path === "/login"）{ /** *用戶已經(jīng)登陸，但是還路由到login頁面，這代表用戶已經(jīng)執(zhí)行了退出登錄的操 *作，所以這個(gè)地方可以清一下token之類的，或者自定義寫一些邏輯 */ next() }else{ /** *這里是已經(jīng)登錄或者點(diǎn)擊了登錄按鈕，token已經(jīng)存入localstorage，但是但是不路 *由到login的情況如果沒有路由到/login，那么就直接讓他放行就行，在這里面我處 *理一些東西，就是用戶既然已經(jīng)登陸，并且可以直接放行，那么我們放 *行之前，在這個(gè)地方需要做一些邏輯，就是判斷用戶的權(quán)限，然后根 *據(jù)用戶的權(quán)限，把我們的動(dòng)態(tài)配置的路由表中符合他權(quán)限的那幾條路 *由給過濾出來，然后插入到路由配置表中去使用 * *那么就涉及到兩個(gè)問題： *1:什么時(shí)候去處理動(dòng)態(tài)路由（登陸之后，進(jìn)入到首頁之前，也就 *是next之前） *2:什么條件處理動(dòng)態(tài)路由 */ /** *這地方可以先判斷一下store中的用戶權(quán)限列表長度是否為0，若長度為0，則代表用戶 *是剛點(diǎn)擊了登錄按鈕，但是還沒有進(jìn)入到頁面，這時(shí)候需要再去做一些權(quán)限過濾之類的 *操作如果長度不為0代表鑒權(quán)流程都沒問題了，直接前往對應(yīng)的組件就行 *這一步主要是為了防止重復(fù)過濾數(shù)組，節(jié)約性能 */ if(store.getters.roles.length > 0){ next() }else{ //代碼如果走到了這個(gè)地方，代表用戶是已登錄。并且鑒權(quán)流程還沒走， //那么在這地方就需要去走鑒權(quán)流程 store.dispatch('getRoles').then(res=>{ //這個(gè)地方的res是第三步那個(gè)地方的peomise中的resolve傳 //過來的，也就是權(quán)限信息的那個(gè)數(shù)組 store.dispatch('createRouters',res.data) .then(res=>{ //這里是調(diào)用store創(chuàng)造動(dòng)態(tài)路由的那個(gè)函數(shù),這個(gè)地方可以把那 //個(gè)權(quán)限數(shù)組傳到這個(gè)函數(shù)內(nèi)部，或者不在這里傳，這個(gè) //函數(shù)內(nèi)部直接去取自己state里面的roles的值也是一樣的 let addRouters = store.getters('addRouters') let allRouters = store.getters('allRouters') //添加動(dòng)態(tài)路由部分到工作路由 router.addRoutes(accessRoutes) //前往攔截的頁面 next({ ...to, replace: true }) }) }) } } } else { /**這里是處理沒有token的情況，也就是說這時(shí)候用戶還沒有登陸，那 *如果沒用戶登錄，那么判斷用戶是不是去登錄頁面，如果是登錄 *頁面，就直接放行，如果沒登陸就想去訪問主頁那種頁面，就讓 *他重定向到登錄頁面 */ if（to.path == '/login'）{ //這地方可以判斷的仔細(xì)一點(diǎn)，不一定是去login的時(shí)候再讓他直接放行，而是 //前往所有公共組件的時(shí)候，都直接讓他放行 next() }else{ next('/login') } }}) |
store.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
//在api文件夾中定義一個(gè)獲取此用戶的權(quán)限的接口，并且在這個(gè)actions中調(diào)用import { getUserRole } from "../api/getRoles" //獲取權(quán)限的接口import { logout } from '../api/user' //用戶退出登錄的接口import { resetRouter } from './router'import { removeToken } from '@/utils/auth' // 自定義封裝清除token的方法//這個(gè)是過濾數(shù)組的方法，如果路由表是多層嵌套的，那么可以遞歸調(diào)用這個(gè)方法去過濾數(shù)組//function hasPermission(roles, route) {// if (route.meta && route.meta.roles) {// return roles.some(role => route.meta.roles.includes(role))// } else {// return true// }//}//export function filterAsyncRoutes(routes, roles) {// const res = []// routes.forEach(route => {// const tmp = { ...route }// if (hasPermission(roles, tmp)) {// if (tmp.children) {// tmp.children = filterAsyncRoutes(tmp.children, roles)// }// res.push(tmp)// }// })//// return res//}//引入默認(rèn)路由以及動(dòng)態(tài)路由import { defauleRoute , asyncRouter } from '@/router'const state = { roles：[] //掉接口拿到的權(quán)限列表，假設(shè)數(shù)據(jù)格式為：["order","roles"], allRouters: [], //這個(gè)是全部整合以后，最終要工作的路由 addRouters: [],//這個(gè)是根據(jù)權(quán)限動(dòng)態(tài)匹配過濾出來部分的路由} const getters = { /**把state中的roles存入到這個(gè)getters中，那么其他獲取這個(gè)getters中的 *roles的地方，只要原本的roles發(fā)生改變，其他地方的這個(gè)roles也就會(huì)發(fā)生 *改變了，這個(gè)相當(dāng)于是computed計(jì)算屬性 */ roles:state => state.roles allRouters:state => state.allRouters addRouters:state => state.addRouters}const mutations：{ /**在下面的actions里面通過commit把權(quán)限信息的數(shù)組提交到這個(gè)地方，然后 *這個(gè)地方把數(shù)組提交到state的roles */ SetRoute（state,router） //這個(gè)地方的router就是根據(jù)用戶權(quán)限，過濾出來的路由表 state.allRouters = defauleRoute.concat(router) state.addRouters = router } //把路由權(quán)限數(shù)組存儲到state setRoles(state,value){ state.roles = value }}const actions：{ //寫一個(gè)獲取當(dāng)前登陸角色權(quán)限的請求，比如["/order","roles"]，如果請求回 //來的是這樣的，那么就代表這個(gè)角色的權(quán)限就是可以訪問 order路由以及 //roles路由 //獲取權(quán)限信息可能有兩種情況：除了下面這種權(quán)限信息是一個(gè)單獨(dú)的接口， //權(quán)限信息也可能跟著用戶登陸的接口就一并返回 //獲取當(dāng)前用戶的權(quán)限信息，并且存入到state中，這個(gè)權(quán)限信息，可能跟后 //端在溝通的時(shí)候，他不會(huì)單獨(dú)寫成一個(gè)接口給你去請求，而是你在登陸請求 //的時(shí)候就把用戶信息和這個(gè)此用戶的權(quán)限信息都一次性返回給你了，那就在 //用戶登陸的時(shí)候就把這個(gè)權(quán)限信息存入到這個(gè)state中，也一 //樣的，目的就是要把權(quán)限信息的數(shù)組存入到state中就行 //獲取roles權(quán)限方法 getRoles({commit},data){ return new Promise(resolve,reject){ //調(diào)用獲取用戶權(quán)限接口 getUserRole().then(res =>{ //這里返回的數(shù)據(jù)應(yīng)該是一個(gè)權(quán)限信息的數(shù)組，如:["order","roles"] //把權(quán)限信息通過mutations存入到state commit('setRoles',res.data) resolve(res.data) }) } }) //根據(jù)權(quán)限過濾數(shù)組配置表的方法 createRouters({ commit } , data ){ return new Promise((resolve,reject) =>{ let addRouters = [ ] if（data.includes("admin"）{ addRouters = asyncRouter }else{ //項(xiàng)目開發(fā)中路由數(shù)組可能是多層嵌套，那么這地方需要用上面自定義的方 //法通過遞歸的方式去過濾，此demo就只按一層數(shù)組處理 //（filterAsyncRoutes）方法 addRouters = asyncRouter.filter(item=>{ if(data.includes(item.meta.system) ){ return item } }) } //把這個(gè)匹配出來的權(quán)限路由傳到mutations中，讓mutations //把這個(gè)匹配出來的路由存入到state commit.("SetRoute",addRouters) resolve() //這個(gè)地方要調(diào)用一下這個(gè)resolve，這樣外面訪可以通過 //.then拿到數(shù)組過濾成功的回調(diào) }) }, logout({ commit }) { return new Promise((resolve, reject) => { logout().then(() => { removeToken() // must remove token first resetRouter() commit('setRoles', []) commit('SetRoute', []) resolve() }).catch(error => { reject(error) }) }) },}export default { state, getters, mutations, actions} |
退出登錄：
|
1
2
3
4
5
6
7
8
9
10
|
async function logout(){ try{ const res = await store.dispatch.logout() if(res.code == 200){ //退出登錄成功 } }catch{ //退出登錄失敗（出錯(cuò)了） }} |
結(jié)尾：
代碼一大堆，其實(shí)思路很簡單，不過是拿到路由配置表，過濾數(shù)組，動(dòng)態(tài)添加而已
項(xiàng)目參考github：vue-element-admin
到此這篇關(guān)于vue element后臺鑒權(quán)流程分析的文章就介紹到這了,更多相關(guān)vue element鑒權(quán)內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/weixin_46311806/article/details/115479904
