vue 按钮级别权限的实现

# vue 按钮级别权限的实现

1. 按钮级的权限

   1.1前后端共同规定每种按钮的标识符 添加=>Add 修改=>Update 删除=>Delete

   ​ 在每次加载页面的时候请求接口,拿到按钮级别的权限,存放在Session里面或者公共存储里面

   ​ 然后通过自定义v-has=”{class:’Add’}”去控制显示和隐藏

2. 使用

   2.1在src下的utils里面把js文件放进去,随后在main.js里面引入,

   ​ import { has } from “./utils/hasPermission”;

   2.2 在页面的按钮级权限的里面v-has="{class:‘admin’}" 去控制

** 在src下创建util文件夹创建hasPermission.js文件**

import Vue from "vue";
/**
 * 按钮级别的权限控制 -- 比对元素 -- 元素绑定角色值---登录后获取角色的值
 * 元素绑定角色值,接收字符串或者数组
 */
/** 权限指令 */
let has = Vue.directive("has", {
	inserted: function(el, binding) {
		//注意使用inserted周期,不要使用bind 不然无法删除元素
		let ClassName = binding.value.class; //v-has 接收数组对象
		if (el.parentNode && !Vue.prototype.$_has(ClassName)) {
			el.parentNode.removeChild(el);
		}
	},
});
// 元素指令值与角色值对比,如果不匹配,返回false
// 权限检查
Vue.prototype.$_has = function(val) {
	let isShow = false;
	let bthPerminnions = sessionStorage.getItem("bthPermissions");
	if (bthPerminnions === undefined || bthPerminnions == null) {
		return false;
	}
	if (typeof val === "string") {
		if (val === bthPerminnions) {
			isShow = true;
		}
		return isShow;
	} else {
		for (let i = 0; i < val.length; i++) {
			const showIs = val[i];
			if (showIs === bthPerminnions) {
				isShow = true;
			}
		}
		return isShow;
	}
};
export { has };

我是放在了session里面,如果放在vuex中直接修改js文件即可,同理.根据情况而定