在做后台管理系统时,经常会有权限管理的功能,这里来记录一下关于按钮权限管理的实现方法
1、自定义指令 v-permission。新建js文件用来写指令代码。
export default function btnPerms(app) {
app.directive('permission', {
mounted(el, binding) {
if (!permsJudge(binding.value)) {
el.parentNode.removeChild(el);
}
function permsJudge(value){
let perms = JSON.parse(localStorage.getItem('perms')) || [];
for (let item of perms) {
if (item === value) {
return true;
}
}
return false;
}
}
});
}
2、在main.js里注入;
3、在登录后台时获取后端返回的用户权限数据,并且存入到本地;我这边是把获取数据的接口放在vuex中的
async _getUserPermission(contxt,payload){
let res = await getUserPermission();
if(res && res.data){
let {code,data,message} = res.data;
if(code == 200){
localStorage.setItem('perms',JSON.stringify(data.resourceList));
contxt.commit('getPerObj',data.resourceList);
}else {
reject(message)
}
}
}
然后在登录页面调用这个方法;也可以直接在登录页面获取数据,这里就不赘述了。
获取的数据大概是这个格式
4、在需要判断权限的按钮调用指令;
这样就可以实现按钮权限了,如有问题,欢迎留言!!