思路：
按钮权限也可以用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自定义指令实现按钮级权限控制，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
