Vue | 自定義指令和動態路由實現許可權控制
阿新 • • 發佈:2020-08-27
功能概述:
- 根據後端返回介面,實現路由動態顯示
- 實現按鈕(HTML元素)級別許可權控制
涉及知識點:
- 路由守衛
- Vuex使用
- Vue自定義指令
# 導航守衛
> 前端工程採用Github開源專案`Vue-element-admin`作為模板,該專案地址:[Github | Vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) 。
在`Vue-element-admin`模板專案的[src/permission.js](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/permission.js)檔案中,給出了路由守衛、載入動態路由的實現方案,在實現了基於不同角色載入動態路由的功能。我們只需要稍作改動,就能將基於角色載入路由改造為基於許可權載入路由。
> **導航守衛**:可以應用於在路由跳轉時,對使用者的登入狀態或許可權進行判斷。專案中使用全域性前置守衛。參考Vue官方文件:[https://router.vuejs.org/zh/guide/advanced/navigation-guards.html](https://router.vuejs.org/zh/guide/advanced/navigation-guards.html)
## 後臺返回介面
![getUserInfo介面返回使用者資訊和路由、操作許可權等](https://upload-images.jianshu.io/upload_images/6810620-ce87011f40db9c72.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
許可權系統後臺採用基於角色的許可權控制方案(`role-based access control`),如上圖所示,
該使用者資訊介面將查詢使用者所具有的所有角色,再將這些角色的許可權並集按照路由 - 操作整合在一起返回。在使用者登入入系統後,我們從後臺請求獲得使用者資訊(個人資訊 + 許可權資訊),作為全域性屬性儲存在前端。不同許可權的使用者看到的頁面不同,依賴於這些屬性,它們決定了路由如何載入、頁面如何渲染。
這種多個元件依賴一組屬性的場景,Vue提供了`VueX`作為全域性狀態管理方案。
## 使用VueX儲存許可權資訊
在`src/store/moudules`目錄下定義`permission.js`
### 1.定義非同步方法,方法內部包含HTTP請求從後臺拉取資料
```
import http from '../../axios';
async function getUserInfo() {
const res = await http.getUserInfo();
return res;
}
```
使用`await`關鍵字,保證執行順序正確。這裡是為了保證能拿到介面返回的內容,以便於下一步處理。
```
const actions = {
getPermissions({ commit }) {
return new Promise(resolve => {
getUserInfo().then(res => {
if (res) {
let permissionList = res.permissionList;
commit('SET_PERMISSIONS', permissionList);
// 根據後臺返回的路由,生成實際可以訪問的路由
let accessRoutes = filterAsyncRoutesByPermissions(asyncRoutes, permissionList);
commit('SET_ROUTES', accessRoutes);
commit('SET_USER_INFO', { name: res.name, accountName: res.accountName })
resolve(accessRoutes);
} else {
resolve([]);
}
}).catch(() => resolve([]));
})
}
}
```
VueX中action定義非同步方法。
### 2. 定義靜態、動態路由
`src/router/index.js`
靜態路由:
```
export const constantRoutes = [
{
path: '/redirect',
component: Layout,
hidden: true,
children: [
{
path: '/redirect/:path(.*)',
component: () => import('@/views/redirect/index'),
},
],
,
...
{
path: '/404',
component: () => import('@/views/error-page/404'),
hidden: true,
}
];
```
動態路由:
```
export const asyncRoutes = [
{
path: '/system',
component: Layout,
name: '系統管理',
meta: { title: '系統管理', icon: 'el-icon-user', affix: true },
children: [
{
path: '/system',
component: () => import('@/views/management/system/Index'),
meta: { title: '系統管理', icon: 'el-icon-setting', affix: true },
},
],
}
...
]
```
靜態路由中定義了所有使用者均可訪問的路由,動態路由中定義了動態載入的路由。
### 3.根據許可權過濾並排序路由
```
export function filterAsyncRoutesByPermissions(routes, menus) {
const res = []
routes.forEach(route => {
const tmp = { ...route }
let index = menus.map(menu => menu.url).indexOf(tmp.path);
if (index != -1) {
// 後端返回路由資訊覆蓋前端定義路由資訊
tmp.name = menus[index].name;
// debugger;
tmp.meta.title = menus[index].name;
tmp.children.forEach(child => {
if (child.path == tmp.path) {
child.meta.title = tmp.meta.title;
}
})
res.push(tmp)
}
});
// 根據返回選單順序,確定路由順序
/**
* TODO 子選單排序
*/
res.sort((routeA, routeB) => menus.map(menu => menu.url).indexOf(routeA.path) - menus.map(menu => menu.url).indexOf(routeB.path))
return res
}
```
根據url匹配,匹配到url的路由則加入陣列。終端使用者可以訪問的路由 = 允許訪問的動態路由 + 不需要許可權的靜態路由。
### 4.src/permission.js中的處理邏輯
```javascript
// 引入store
import store from './store';
const whiteList = ['/login', '/auth-redirect']; // no redirect whitelist
// 路由守衛
router.beforeEach(async (to, from, next) => {
//start progress bar
NProgress.start()
if (hasToken) {
if (to.path === '/login') {
// ... 省略登出邏輯
NProgress.done();
} else {
// 檢視是否已快取過動態路由
const hasRoutes = store.getters.permission_routes && store.getters.permission_routes.length > 0;
if (hasRoutes) {
next();
} else {
try {
const accessRoutes = await store.dispatch('permission/getPermissions');
router.addRoutes(accessRoutes);
const toRoute = accessRoutes.filter((route) => route.path == to.path);
next({ path: toRoute.length > 0 ? toRoute[0].path : accessRoutes[0].path, replace: true });
} catch (error) {
next(`/login?redirect=${to.path}`);
NProgress.done();
}
}
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next();
} else {
next(`/login?redirect=${to.path}`);
NProgress.done();
}
}
});
router.afterEach(() => {
// finish progress bar
NProgress.done();
});
```
以上是動態路由實現方案。
---
`Vue`支援自定義指令,用法類似於Vue原生指令如`v-model`、`v-on`等,網上查閱到的大部分細粒度許可權控制方案都使用這種方法。下面將給出我的實現。
# 自定義指令
自定義指令 `v-permission`:
`src/directive/permission/index.js`
```javascript
import store from '@/store'
export default {
inserted(el, binding, vnode) {
const { value } = binding
const permissions = store.getters && store.getters.permissions;
if (value) {
// 獲取當前所掛載的vue所在的上下文節點url
let url = vnode.context.$route.path;
let permissionActions = permissions[url];
// console.log(permissionActions)
const hasPermission = permissionActions.some(action => {
if (value.constructor === Array) {
// 或判斷: 只要存在任1,判定為有許可權
return value.includes(action);
} else {
return action === value;
}
})
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}
} else {
throw new Error(`need further permissions!`)
}
}
}
```
後端給出的許可權資料是路由(url)與操作的對應Map,url可以通過將要掛載到的vnode屬性拿到。這個方法有點類似於AOP,在虛擬元素掛載之後做判斷,如果沒有許可權則從父元素上移除掉。
使用方法:
* 舉例一:單個按鈕 (注意雙引號套單引號的寫法)
```html
```
* 舉例二:或判斷(傳入陣列),只要擁有陣列中一個許可權,則保留元素,所有許可權都沒有,則移除。
在上一篇部落格[https://www.jianshu.com/p/066c4ce4c767](https://www.jianshu.com/p/066c4ce4c767)
下拉選單上增加控制:
![dot-dropdown](https://upload-images.jianshu.io/upload_images/6810620-2b43cdac58ffd33b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![資料定義](https://upload-images.jianshu.io/upload_images/6810620-a1e4288a9038080d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
相應資料定義中增加action屬性。
該方法無法覆蓋所有場景,所以依然給出相應工具類:
```
/**
*
* @param {*當前頁面路由} url
* @param {*操作code e.g op_add } value
* @return true/false 是否有該項許可權
*/
function checkPermission(url, value) {
const permissions = store.getters && store.getters.permissions;
let permissionActions = permissions[url];
if (!permissionActions) {
return false;
}
let hasPermission = permissionActions.some(action => {
if (value.constructor === Array) {
// 或判斷: 只要存在任1,判定為有許可權
return value.includes(action);
} else {
return action === value;
}
});
return hasPermission;
}
```
以上完成按鈕粒度許可權