后端返回的数据
前端实现通过自定义指令实现按钮权限的控制
在main.js中定义自定义指令
// 自定义指令
Vue.directive('permission', {
bind: function (el, binding) {
console.log(el, binding, '1121')
if (!Vue.prototype.$_permission(binding.value)) {
if (!el.parentNode) {
el.style.display = 'none'
} else {
el.parentNode.removeChild(el)
}
}
}
});
// 挂载在原型链中 方便全局使用
// 是否匹配后端返回的按钮权限列表
Vue.prototype.$_permission = function (value) {
// debugger
let isExist = false;
let buttonpermsStr = localStorage.getItem("buttenpremissions");
if (buttonpermsStr == undefined || buttonpermsStr == null) {
return false;
}
let buttonperms = JSON.parse(buttonpermsStr);
for (let i = 0; i < buttonperms.length; i++) {
if (buttonperms[i].indexOf(value) > -1) {
isExist = true;
break;
}
}
return isExist;
};
在页面中使用
在需要的按钮标签中加入 v-permission="'按钮权限'"
实现
我这里的按钮权限为system:merchant:edit
我输入的是system:merchant:edit1'
效果图
<button
class="btnCss btn1"
@click="$router.push('/setting/addMchid')"
v-permission="'system:merchant:edit1'"
>添加</button>
组件中使用 通过使用$_permission
函数结合v-if
实现元素的权限控制
<el-table-column prop="queue" label="状态" v-if="$_permission('system:type:enable')" >
<template slot-scope="scope">
<el-switch
v-model="scope.row.enable"
@change="changeSelect(scope.row)"
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>
</template>
</el-table-column>