基于Vue自定义指令实现按钮级权限控制的方法

废话不多说，上代码...

路由配置：

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>

结语：

权限这种事需要前后端结合，前端尽可能的去控制，记住：永远不相信用户输入！