功能概述：

• 根據後端返回介面，實現路由動態顯示
• 實現按鈕（HTML元素）級別許可權控制
  

涉及知識點：

• 路由守衛
• Vuex使用
• Vue自定義指令
  

導航守衛

前端工程採用Github開源專案Vue-element-admin作為模板，該專案地址：Github | Vue-element-admin 。

在Vue-element-admin模板專案的src/permission.js檔案中，給出了路由守衛、載入動態路由的實現方案，在實現了基於不同角色載入動態路由的功能。我們只需要稍作改動，就能將基於角色載入路由改造為基於許可權載入路由。

導航守衛：可以應用於在路由跳轉時，對使用者的登入狀態或許可權進行判斷。專案中使用全域性前置守衛。參考Vue官方文件：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'),}
];

動態路由：

export const asyncRoutes = [
 {
  path: '/system',name: '系統管理',meta: { title: '系統管理',icon: 'el-icon-user',affix: true },children: [
   {
    path: '/system',component: () => import('@/views/management/system/Index'),icon: 'el-icon-setting',}
...
]

靜態路由中定義了所有使用者均可訪問的路由，動態路由中定義了動態載入的路由。

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中的處理邏輯

// 引入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

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，在虛擬元素掛載之後做判斷，如果沒有許可權則從父元素上移除掉。
使用方法：

• 舉例一：單個按鈕 （注意雙引號套單引號的寫法）

   <el-button @click.native.prevent="editUser(scope.row)" type="text" size="small" v-permission="'op_edit'">
          編輯
   </el-button>

• 舉例二：或判斷（傳入陣列），只要擁有陣列中一個許可權，則保留元素，所有許可權都沒有，則移除。
  

在上一篇部落格https://www.jb51.net/article/194361.htm
下拉選單上增加控制：

相應資料定義中增加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;

}

以上完成按鈕粒度許可權控制。

以上就是vue自定義指令和動態路由實現許可權控制的詳細內容，更多關於vue自定義指令和動態路由的資料請關注我們其它相關文章！