前端控制权限隐藏按钮 vue自定义指令v-has
程序员文章站
2022-06-23 11:32:52
1.通过请求获取权限,放入localStorage:(这里是多个权限,保存为字符串,用逗号隔开)window.localStorage.setItem("permissionPage", "editPage,detailPage");window.localStorage.setItem("permissionButton", "canEdit,canDelete");2.在main.ts中引入:import hasPermission from '@/common/utils/hasPermi...
1.通过请求获取权限,放入localStorage:
(这里是多个权限,保存为字符串,用逗号隔开)
window.localStorage.setItem("permissionPage", "editPage,detailPage");
window.localStorage.setItem("permissionButton", "canEdit,canDelete");
2.在main.ts中引入:
import hasPermission from '@/common/utils/hasPermission'
Vue.use(hasPermission)
3.新建一个hasPermission.ts文件:
在目录:src/common/utils
import Vue from 'vue';
const _ = require("lodash");
const hasPermission = {
install(Vue: any, options: any) {
//自定义指令v-has:
Vue.directive('has', {
//inserted:被绑定元素插入父节点时调用
inserted: function (el: any, binding: any) {
if (!Vue.prototype.$_has(binding.value)) {
el.parentNode.removeChild(el);
}
},
});
//权限检查方法
Vue.prototype.$_has = function (value: any) {
let isExist = false;
//将拥有的权限字符串转拆分为数组:
let pageArr =_.split(localStorage.getItem("permissionPage"), ',');
let buttonArr = _.split(localStorage.getItem("permissionButton"), ',');
//判断是否页面有权限 //判断是否按钮有权限
if (pageArr.includes(value) || buttonArr.includes(value)) {
isExist = true;
}
return isExist;
};
}
};
export default hasPermission;
用localStorage.getItem(“permissionPage”),localStorage.getItem(“permissionButton”)分别与指令传过来的value相对比。
相同证明有权限,显示;不相同就没权限,不显示。
4.使用方法:
<van-col span="12" v-has="'canEdit'">编辑</van-col>
易踩坑:使用自定义指令钩子函数bind,无法删除节点:el.parentNode.removeChild,只调用一次,指令第一次绑定到元素时调用。节点还没生成出来。应使用inserted。
本文地址:https://blog.csdn.net/weixin_44914782/article/details/109239798
上一篇: 前端实现html页面导出为word文档