首先,原理
let btnPermissions = [];
for(var a = 0 ;a<res.data.map.buttonList.length ; a++){
btnPermissions.push(res.data.map.buttonList[a].resCode);
}
sessionStorage.setItem('btnPermissions', JSON.stringify(btnPermissions));
登录成功后,buttonList中,后台返回过来的按钮的集合,我取到里面的标识符,存入数组。
结果如下,
let btnPermissions = ['domain:query','domain:add','domain:edit','domain:cache','domain:del','domain:define','domain:transition']
新建个js,directive.js
import Vue from 'vue'
/**权限指令**/
const has = Vue.directive('has', {
inserted: function (el, binding, vnode) {
// 获取按钮权限
let btnPermissions = el.getAttribute("value");
if (!Vue.prototype.$_has(btnPermissions)) {
//这个时候就是没有权限,需要删除掉按钮
el.parentNode.removeChild(el);
}
}
});
// 权限检查方法
Vue.prototype.$_has = function (value) {
let isExist = false;
let btnPermissionsStr = JSON.parse(sessionStorage.getItem("btnPermissions"));
if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
return false;
}
if (btnPermissionsStr.indexOf(value) > -1) {
isExist = true;
}
return isExist;
};
export {has}
在main.js中引入js
import has from '@/api/directive.js';
在页面中,按钮上加入
<el-form-item>
<el-button type="primary" icon="el-icon-search" v-on:click="getRows" value='domain:query' v-has>查询</el-button>
</el-form-item>
其中最重要的就是加入了value=‘domain:query’ v-has,v-has是定义的钩子,会在inserted的时机,去调用directive.js中的方法,去判断自己是否显示,value='domain:query’是其中的判断条件,必须唯一,所以我这里强制约定为routes定义的component属性,的一个字母小写
使用
以‘域定义管理’为列,因为component = Domain,所以对应的按钮
查询:value=‘domain:query’
新增:value=‘domain:add’
修改:value=‘domain:edit’
删除:value=‘domain:del’
在资源配置中
注意一定要是类型按钮,然后再角色中资源关联去给按钮权限赋值
注意,不能和v-if共同使用,可以和v-show共同使用