最近做的一个后台系统,要求权限控制到按钮级别,也就是说对于不同的用户,可操作的按钮是不一样的,换言之,有些按钮对某些客户是不可见的.例如:用户A能看到"新增"按钮,而用户B看不到,假设"新增"按钮"的权限是"sys:add",
这里提供两种解决办法:1.定义一个全局方法,配合v-if实现;2.使用自定义指令;(以下详述)
1.定义一个全局方法,配合v-if实现;
在用户登录成功后,获取用户的按钮权限(数组格式),存储到store中
定义公共函数hasPermission
在main.js中引入,
在需要的按钮上使用即可
2.自定义指令
directives 在全局main.js中注册
路由配置：
{
path:'/permission',
component: Layout,
meta: { btnPermissions: ['admin','supper','normal'] //页面需要的权限
},
自定义指令：
/**权限指令**/
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;
}
returnisExist;
}
export {has};
/*然后在main.js文件引入文件*/
importhas from'./public/js/btnPermissions.js';
/*页面中按钮只需加v-has即可*/
以上,方法一亲测有效,方法二借鉴的,未能实践...
