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

lixinchao發表於2019-03-04
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>

複製程式碼

結語：

許可權這種事情需要前後端結合，前端儘可能的去控制，更多的需要後臺判斷。記住：永遠不相信使用者輸入！

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

相關文章