Vue自定義指令實現按鈕級權限控制功能

思路：

1. 登錄：當用戶填寫完賬號和密碼后向服務端驗證是否正確，驗證通過之后，服務端會返回一個token，拿到token之后（我會將這個token存貯到sessionStorage中，保證刷新頁面后能記住用戶登錄狀態），前端會根據token再去拉取一個 user_info 的接口來獲取用戶的詳細信息（如用戶權限，用戶名等等信息）。
2. 權限驗證：通過token獲取用戶對應的 role，自定義指令，獲取路由meta屬性里btnPermissions( 注： meta.btnPermissions是存放按鈕權限的數組，在路由表里配置 )，然后判斷role是否在btnPermissions數組里，若不在即刪除該按鈕DOM。

按鈕權限也可以用v-if判斷，但是如果頁面過多，每個頁面頁面都要獲取用戶權限role和路由表里的meta.btnPermissions,然后再做判斷，感覺有點麻煩，而自定義指令，只需在權限按鈕加入該指令即可。

路由配置：

 

path: '/permission',
  component: Layout,
  name: '權限測試',
  meta: { btnPermissions: ['admin','supper','normal'] }, //頁面需要的權限
  children: [
   {
    path: 'supper',
    component: _import('system/supper'),
    name: '權限測試頁',
    meta: { btnPermissions: ['admin','supper'] } //頁面需要的權限
   },
   {
    path: 'normal',
    component: _import('system/normal'),
    name: '權限測試頁',
    meta: { btnPermissions: ['admin'] } //頁面需要的權限
   }
  ]

注：如果按鈕的權限是由后台配置並返回的此處可不設置，從后台獲取權限即可

自定義指令：

 

import Vue from 'vue'
/**權限指令**/

　　const has = Vue.directive('has', {

  　　 // 當被綁定的元素插入到 DOM 中時……

  　　inserted: function (el, binding, vnode) {

    　　let btnPermissions = '';

    　　 // 獲取指令按鈕權限

    　　let characteristic = binding.value;

    　　if (characteristic) btnPermissions = characteristic;

    　　 // 獲取路由按鈕權限

    　　btnPermissions = vnode.context.$route.meta.btnPermissions.split(',');

    　　if (!Vue.prototype.$_has(btnPermissions)) {

      　　el.parentNode.removeChild(el);

    　　}

  　　}

　　});

// 權限檢查方法
Vue.prototype.$_has = function (value) {
 let isExist = false;
 let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
 if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
  return false;
 }
 let res = value.filter((x) => {
 　　return btnPermissionsStr.include(x)
 })
 if (res.length > 0) isExist = truereturn isExist;
};

export {has}

然后在main.js文件引入文件

import has from './public/js/btnPermissions.js';

頁面中按鈕只需加v-has即可

<el-button @click='editClick' type="primary" v-has>編輯</el-button>

權限前后端都可進行控制，但是盡可能的在前端就進行攔截驗證。借用一句經典名言：永遠不相信用戶輸入！