首先创建一个 btnPermissions.js 文件夹(路由里面存放了该页面拥有的按钮权限)
import Vue from 'vue'
/**权限指令**/
const has = Vue.directive('has', {
bind: function (el, binding, vnode) {
// 获取页面路由按钮权限
let btnPermissions = vnode.context.$route.meta.permissionValues;
// 进入循环判断是否显示该节点
if (!Vue.prototype.$_has(btnPermissions,binding.value)) {
// el.parentNode.removeChild(el);
el.style.display = "none";
}
}
});
// 权限检查方法 value：按钮的值 btnPermissions： 路由含有的按钮权限
Vue.prototype.$_has = function (btnPermissions,value) {
let isExist = false;
// 判断当前用户该页面是否含有权限按钮
if (btnPermissions == undefined || btnPermissions == null) {
return false;
}
// 判断该用户该页面的权限按钮是否显示
if (btnPermissions.indexOf(value) > -1) {
isExist = true;
}
return isExist;
};
export {has}
路由配置
在main.js 全局调用
import has from './plugins/btnPermissions' // 权限按钮字段判断
在页面使用
<Button icon="md-add" type="primary" style="margin-left: 10px" v-has="user.add" @click="add">添加</Button>
export default {
data() {
return {
user:{
add: "user.add"
}, // 权限按钮
}
}
