vue 按钮级别权限的实现

最新推荐文章于 2024-11-28 23:00:09 发布

原创最新推荐文章于 2024-11-28 23:00:09 发布 · 764 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #html

本文介绍如何在Vue项目中实现按钮级别的权限控制。通过自定义指令v-has，并在后端定义按钮标识符如添加=Add、修改=Update、删除=Delete等，在页面加载时获取这些权限并存储，利用hasPermission.js文件中的方法判断当前用户是否拥有该权限。

# vue 按钮级别权限的实现

按钮级的权限

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

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

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

使用

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 };