功能概述： - 根據後端返回介面，實現路由動態顯示 - 實現按鈕（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) ## 後臺返回介面  許可權系統後臺採用基於角色的許可權控制方案（`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) 下拉選單上增加控制：   相應資料定義中增加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; } ``` 以上完成按鈕粒度許可權