您好,登錄后才能下訂單哦!
前言
在一個(gè)項(xiàng)目中,一些功能會(huì)涉及到重要的數(shù)據(jù)管理,為了確保數(shù)據(jù)的安全,我們會(huì)在項(xiàng)目中加入權(quán)限來限制每個(gè)用戶的操作。作為前端,我們要做的是配合后端給到的權(quán)限數(shù)據(jù),做頁面上的各種各樣的限制。
需求
因?yàn)檫@是一個(gè)工作上的業(yè)務(wù)需求,所以對(duì)于我來說主要有兩個(gè)地方需要進(jìn)行權(quán)限控制。
第一個(gè)是側(cè)邊菜單欄,需要控制顯示與隱藏。
第二個(gè)就是頁面內(nèi)的各個(gè)按鈕,彈窗等。
流程
1、如何獲取用戶權(quán)限?
后端(當(dāng)前用戶擁有的權(quán)限列表)-> 前端(通過后端的接口獲取到,下文中我們把當(dāng)前用戶的權(quán)限列表叫做 permissionList)
2、前端如何做限制?
通過產(chǎn)品的需求,在項(xiàng)目中進(jìn)行權(quán)限點(diǎn)的配置,然后通過 permissionList 尋找是否有配置的權(quán)限點(diǎn),有就顯示,沒有就不顯示。
3、然后呢?
沒了。
當(dāng)我剛開始接到這個(gè)需求的時(shí)候就是這么想的,這有什么難的,不就獲取 permissionList 然后判斷就可以了嘛。后來我才發(fā)現(xiàn)真正的需求遠(yuǎn)比我想象的復(fù)雜。
真正的問題
上面的需求有提到我們主要解決兩個(gè)問題,側(cè)邊菜單欄的顯示 & 頁面內(nèi)操作。
假設(shè)我們有這樣一個(gè)路由的設(shè)置(以下只是一個(gè)例子):
import VueRouter from 'vue-router' /* 注意:以下配置僅為部分配置,并且省去了 component 的配置 */ export const routes = [ { path: '/', name: 'Admin', label: '首頁' }, { path: '/user', name: 'User', label: '用戶', redirect: { name: 'UserList' }, children: [ { path: 'list', name: 'UserList', label: '用戶列表' }, { path: 'group', name: 'UserGroup', label: '用戶組', redirect: { name: 'UserGroupList' }, children: [ { path: 'list', name: 'UserGroupList', label: '用戶組列表' }, { path: 'config', name: 'UserGroupConfig', label: '用戶組設(shè)置' } ] } ] }, { path: '/setting', name: 'Setting', label: '系統(tǒng)設(shè)置' }, { path: '/login', name: 'Login', label: '登錄' } ] const router = new VueRouter({ routes }) export default router
其中前兩級(jí)路由會(huì)顯示在側(cè)邊欄中,第三級(jí)就不會(huì)顯示在側(cè)邊欄中了。
頁面內(nèi)操作的權(quán)限設(shè)置不需要考慮很多其他東西,我們主要針對(duì)側(cè)邊欄以及路由進(jìn)行問題的分析,通過分析,主要有以下幾個(gè)問題:
下面我們針對(duì)以上問題一個(gè)一個(gè)解決。
什么時(shí)候獲取權(quán)限,存儲(chǔ)在哪 & 路由限制
我這里是在 router 的 beforeEach 中獲取的,獲取的 permissionList 是存放在 vuex 中。
原因是考慮到要做路由的限制,以及方便后面項(xiàng)目中對(duì)權(quán)限列表的使用,以下是實(shí)現(xiàn)的示例:
首先我們加入權(quán)限配置到 router 上:
// 以下只展示部分配置 { path: '/user', name: 'User', label: '用戶', meta: { permissions: ['U_1'] }, redirect: { name: 'UserList' }, children: [ { path: 'list', name: 'UserList', label: '用戶列表', meta: { permissions: ['U_1_1'] } }, { path: 'group', name: 'UserGroup', label: '用戶組', meta: { permissions: ['U_1_2'] }, redirect: { name: 'UserGroupList' }, children: [ { path: 'list', name: 'UserGroupList', label: '用戶組列表', meta: { permissions: ['U_1_2_1'] } }, { path: 'config', name: 'UserGroupConfig', label: '用戶組設(shè)置', meta: { permissions: ['U_1_2_2'] } } ] } ] }
可以看到我們把權(quán)限加在了 meta 上,是為了更簡(jiǎn)單的從 router.beforeEch
中進(jìn)行權(quán)限判斷,權(quán)限設(shè)置為一個(gè)數(shù)組,是因?yàn)橐粋€(gè)頁面可能涉及多個(gè)權(quán)限。
接下來我們?cè)O(shè)置 router.beforeEach :
// 引入項(xiàng)目的 vuex import store from '@/store' // 引入判斷是否擁有權(quán)限的函數(shù) import { includePermission } from '@/utils/permission' router.beforeEach(async (to, from, next) => { // 先判斷是否為登錄,登錄了才能獲取到權(quán)限,怎么判斷登錄就不寫了 if (!isLogin) { try { // 這里獲取 permissionList await store.dispatch('getPermissionList') // 這里判斷當(dāng)前頁面是否有權(quán)限 const { permissions } = to.meta if (permissions) { const hasPermission = includePermission(permissions) if (!hasPermission) next({ name: 'NoPermission' }) } next() } } else { next({ name: 'Login' }) } })
我們可以看到我們需要一個(gè)判斷權(quán)限的方法 & vuex 中的 getPermissionList 如下:
// @/store export default { state: { permissionList: [] }, mutations: { updatePermissionList: (state, payload) => { state.permissionList = payload } }, actions: { getPermissionList: async ({ state, commit }) => { // 這里是為了防止重復(fù)獲取 if (state.permissionList.length) return // 發(fā)送請(qǐng)求方法省略 const list = await api.getPermissionList() commit('updatePermissionList', list) } } }
// @/utils/permission import store from '@/store' /** * 判斷是否擁有權(quán)限 * @param {Array<string>} permissions - 要判斷的權(quán)限列表 */ function includePermission (permissions = []) { // 這里要判斷的權(quán)限沒有設(shè)置的話,就等于不需要權(quán)限,直接返回 true if (!permissions.length) return true const permissionList = store.state.permissionList return !!permissions.find(permission => permissionList.includes(permission)) }
重定向問題
以上我們解決了路由的基本配置與權(quán)限如何獲取,怎么限制路由跳轉(zhuǎn),接下來我們要處理的就是重定向問題了。
這一點(diǎn)可能和我們項(xiàng)目本身架構(gòu)有關(guān),我們項(xiàng)目的側(cè)邊欄下還有子級(jí),是以下圖中的 tab 切換展現(xiàn)的,正常情況當(dāng)點(diǎn)擊藥品管理后頁面會(huì)重定向到入庫管理的 tab 切換頁面,但當(dāng)入庫管理沒有權(quán)限時(shí),則應(yīng)該直接重定向到出庫管理界面。
所以想實(shí)現(xiàn)以上的效果,我需要重寫 router 的 redirect,做到可以動(dòng)態(tài)判斷(因?yàn)樵谖遗渲寐酚蓵r(shí)并不知道當(dāng)前用戶的權(quán)限列表)
然后我查看了 vue-router 的文檔,發(fā)現(xiàn)了 redirect 可以是一個(gè)方法,這樣就可以解決重定向問題了。
vue-router 中 redirect 說明 ,根據(jù)說明我們可以改寫 redirect 如下:
// 我們需要引入判斷權(quán)限方法 import { includePermission } from '@/utils/permission' const children = [ { path: 'list', name: 'UserList', label: '用戶列表', meta: { permissions: ['U_1_1'] } }, { path: 'group', name: 'UserGroup', label: '用戶組', meta: { permissions: ['U_1_2'] } } ] const routeDemo = { path: '/user', name: 'User', label: '用戶', redirect: (to) => { if (includePermission(children[0].meta.permissions)) return { name: children[0].name } if (includePermission(children[1].meta.permissions)) return { name: children[1].name } }, children }
雖然問題解決了,但是發(fā)現(xiàn)這樣寫下去很麻煩,還要修改 router 的配置,所以我們使用一個(gè)方法生成:
// @/utils/permission /** * 創(chuàng)建重定向函數(shù) * @param {Object} redirect - 重定向?qū)ο? * @param {string} redirect.name - 重定向的組件名稱 * @param {Array<any>} children - 子列表 */ function createRedirectFn (redirect = {}, children = []) { // 避免緩存太大,只保留 children 的 name 和 permissions const permissionChildren = children.map(({ name = '', meta: { permissions = [] } = {} }) => ({ name, permissions })) return function (to) { // 這里一定不能在 return 的函數(shù)外面篩選,因?yàn)闄?quán)限是異步獲取的 const hasPermissionChildren = permissionChildren.filter(item => includePermission(item.permissions)) // 默認(rèn)填寫的重定向的 name const defaultName = redirect.name || '' // 如果默認(rèn)重定向沒有權(quán)限,則從 children 中選擇第一個(gè)有權(quán)限的路由做重定向 const firstPermissionName = (hasPermissionChildren[0] || { name: '' }).name // 判斷是否需要修改默認(rèn)的重定向 const saveDefaultName = !!hasPermissionChildren.find(item => item.name === defaultName && defaultName) if (saveDefaultName) return { name: defaultName } else return firstPermissionName ? { name: firstPermissionName } : redirect } }
然后我們就可以改寫為:
// 我們需要引入判斷權(quán)限方法 import { includePermission, createRedirectFn } from '@/utils/permission' const children = [ { path: 'list', name: 'UserList', label: '用戶列表', meta: { permissions: ['U_1_1'] } }, { path: 'group', name: 'UserGroup', label: '用戶組', meta: { permissions: ['U_1_2'] } } ] const routeDemo = { path: '/user', name: 'User', label: '用戶', redirect: createRedirectFn({ name: 'UserList' }, children), children }
這樣稍微簡(jiǎn)潔一些,但我還是需要一個(gè)一個(gè)路由去修改,所以我又寫了一個(gè)方法來遞歸 router 配置,并重寫他們的 redirect:
// @/utils/permission /** * 創(chuàng)建有權(quán)限的路由配置(多級(jí)) * @param {Object} config - 路由配置對(duì)象 * @param {Object} config.redirect - 必須是 children 中的一個(gè),并且使用 name */ function createPermissionRouter ({ redirect, children = [], ...others }) { const needRecursion = !!children.length if (needRecursion) { return { ...others, redirect: createRedirectFn(redirect, children), children: children.map(item => createPermissionRouter(item)) } } else { return { ...others, redirect } } }
這樣我們只需要在最外層的 router 配置加上這樣一層函數(shù)就可以了:
import { createPermissionRouter } from '@/utils/permission' const routesConfig = [ { path: '/user', name: 'User', label: '用戶', meta: { permissions: ['U_1'] }, redirect: { name: 'UserList' }, children: [ { path: 'list', name: 'UserList', label: '用戶列表', meta: { permissions: ['U_1_1'] } }, { path: 'group', name: 'UserGroup', label: '用戶組', meta: { permissions: ['U_1_2'] }, redirect: { name: 'UserGroupList' }, children: [ { path: 'list', name: 'UserGroupList', label: '用戶組列表', meta: { permissions: ['U_1_2_1'] } }, { path: 'config', name: 'UserGroupConfig', label: '用戶組設(shè)置', meta: { permissions: ['U_1_2_2'] } } ] } ] } ] export const routes = routesConfig.map(item => createPermissionRouter(item)) const router = new VueRouter({ routes }) export default router
當(dāng)然這樣寫還有一個(gè)好處,其實(shí)你并不需要設(shè)置 redirect,這樣會(huì)自動(dòng)重定向到 children 的第一個(gè)有權(quán)限的路由
側(cè)邊欄顯示問題
我們的項(xiàng)目使用的是根據(jù)路由的配置來生成側(cè)邊欄的,當(dāng)然會(huì)加一些其他的參數(shù)來顯示顯示層級(jí)等問題,這里就不寫具體代碼了,如何解決側(cè)邊欄 children 全都無權(quán)限不顯示的問題呢。
這里我的思路是,把路由的配置也一同更新到 vuex 中,然后側(cè)邊欄配置從 vuex 中的配置來讀取。
由于這個(gè)地方涉及修改的東西有點(diǎn)多,而且涉及業(yè)務(wù),我就不把代碼拿出來了,你可以自行實(shí)驗(yàn)。
方便團(tuán)隊(duì)部署權(quán)限點(diǎn)的方法
以上我們解決了大部分權(quán)限的問題,那么還有很多涉及到業(yè)務(wù)邏輯的權(quán)限點(diǎn)的部署,所以為了團(tuán)隊(duì)中其他人可以優(yōu)雅簡(jiǎn)單的部署權(quán)限點(diǎn)到各個(gè)頁面中,我在項(xiàng)目中提供了以下幾種方式來部署權(quán)限:
通過指令 v-permission 來直接在 template 上設(shè)置
<div v-permission="['U_1']"></div>
通過全局方法 this.$permission 判斷,因?yàn)橛行?quán)限并非在模版中的
{ hasPermission () { // 通過方法 $permission 判斷是否擁有權(quán)限 return this.$permission(['U_1_1', 'U_1_2']) } }
這里要注意,為了 $permission 方法的返回值是可被監(jiān)測(cè)的,判斷時(shí)需要從 this.$store 中來判斷,以下為實(shí)現(xiàn)代碼:
// @/utils/permission /** * 判斷是否擁有權(quán)限 * @param {Array<string|number>} permissions - 要判斷的權(quán)限列表 * @param {Object} permissionList - 傳入 store 中的權(quán)限列表以實(shí)現(xiàn)數(shù)據(jù)可監(jiān)測(cè) */ function includePermissionWithStore (permissions = [], permissionList = []) { if (!permissions.length) return true return !!permissions.find(permission => permissionList.includes(permission)) }
import { includePermissionWithStore } from '@/utils/permission' export default { install (Vue, options) { Vue.prototype.$permission = function (permissions) { const permissionList = this.$store.state.permissionList return includePermissionWithStore(permissions, permissionList) } } }
以下為指令的實(shí)現(xiàn)代碼(為了不與 v-if 沖突,這里控制顯示隱藏通過添加/移除 className 的方式):
// @/directive/permission import { includePermission } from '@/utils/permission' const permissionHandle = (el, binding) => { const permissions = binding.value if (!includePermission(permissions)) { el.classList.add('hide') } else { el.classList.remove('hide') } } export default { inserted: permissionHandle, update: permissionHandle }
總結(jié)
針對(duì)之前的問題,有以下的總結(jié):
1、什么時(shí)候獲取 permissionList,如何存儲(chǔ) permissionList
router.beforeEach
獲取,存儲(chǔ)在 vuex。
2、子路由全都沒權(quán)限時(shí)不應(yīng)該顯示本身(例:當(dāng)用戶列表和用戶設(shè)置都沒有權(quán)限時(shí),用戶也不應(yīng)該顯示在側(cè)邊欄)
通過存儲(chǔ)路由配置到 vuex 中,生成側(cè)邊欄設(shè)置,獲取權(quán)限后修改 vuex 中的配置控制顯示 & 隱藏。
3、默認(rèn)重定向的路由沒有權(quán)限時(shí),應(yīng)尋找 children 中有權(quán)限的一項(xiàng)重定向(例:用戶路由重定向到用戶列表路由,若用戶列表沒有權(quán)限,則應(yīng)該重定向到用戶組路由)
通過 vue-router 中 redirect 設(shè)置為 Function 來實(shí)現(xiàn)
4、當(dāng)用戶直接輸入沒有權(quán)限的 url 時(shí)需要跳轉(zhuǎn)到?jīng)]有權(quán)限的頁面或其他操作。(路由限制)
在 meta 中設(shè)置權(quán)限, router.beforeEach
中判斷權(quán)限。
以上就是我對(duì)于這次權(quán)限需求的大體解決思路與代碼實(shí)現(xiàn),可能并不是很完美,但還是希望可以幫助到你 ^_^
好了,以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。