思路：
按鈕權限也可以用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 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; } 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>
結語：
權限這種事需要前后端結合，前端盡可能的去控制，記住：永遠不相信用戶輸入！
以上所述是小編給大家介紹的基于Vue自定義指令實現按鈕級權限控制，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
