基於VUE自定義指令實現按鈕級權限控制

前言：關於權限的那些事！！！

路由權限可參考這位大神寫的，很全面==>手摸手，帶你用vue擼後臺 系列二(登陸權限篇)

思路：

• 登陸：當用戶填寫完帳號和密碼後向服務端驗證是否正確，驗證經過以後，服務端會返回一個token，拿到token以後（我會將這個token存貯到sessionStorage中，保證刷新頁面後能記住用戶登陸狀態），前端會根據token再去拉取一個 user_info 的接口來獲取用戶的詳細信息（如用戶權限，用戶名等等信息）。
• 權限驗證：經過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', {
        bind: function (el, binding, vnode) {
            // 獲取頁面按鈕權限
            let btnPermissionsArr = vnode.context.$route.meta.btnPermissions;
            if (!Vue.prototype.$_has(btnPermissionsArr)) {
                el.parentNode.removeChild(el);
            }
        }
    });
    // 權限檢查方法
    Vue.prototype.$_has = function (value) {
        let isExist = false;
        // 獲取用戶按鈕權限
        let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
        if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
            return false;
        }
        if (value.indexOf(btnPermissionsStr) > -1) {
            isExist = true;
        }
        return isExist;
    };
    export {has}


複製代碼

而後在main.js文件引入文件

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

複製代碼

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

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

複製代碼

結語：

權限這種事情須要先後端結合，前端儘量的去控制，更多的須要後臺判斷。記住：永遠不相信用戶輸入！

以上有不足的地方，歡迎在評論區多多指教！！！