vue自定义指令配置小程序按钮权限

news/2024/7/20 2:31:34 标签: vue.js, 小程序, javascript

先创建一个js文件  plugins.js

// import {
// 	auth,
// 	authAll
// } from "./tools";
import tools from "./tools.js"
// import Vue from 'vue'

function install(Vue, options) {
	Vue.prototype.$auth = tools.auth;
	Vue.prototype.$authAll = tools.authAll;
	// 注册 v-auth 和 v-auth-all 指令
	Vue.directive('auth', {
		inserted: (el, binding) => {
			if (!auth(binding.value)) {
				el.remove()
			}
		}
	})
	Vue.directive('auth-all', {
		inserted: (el, binding) => {
			if (!authAll(binding.value)) {
				el.remove()
			}
		}
	})
}
export default {
	install
}

 再在同级创建一个tools.js文件

var roles = [];
roles = uni.getStorageSync("storeRoleRules") ? uni.getStorageSync("storeRoleRules").split(",") : [];
var storeUserType = uni.getStorageSync("storeUserType")
// console.log(roles, '权限');
console.log(storeUserType, '身份');
// 管理员是0  普通员工是1
function hasPermission(permission) {
	return roles.includes(permission)
}

/**
 * 权限数据,如果传入为 array 时,匹配到其中一项则鉴权通过,并显示 slot 内容
 * @param value
 * @returns {*}
 */
function auth(value) {
	let auth;
	if (storeUserType == '0') {
		return true
	}
	if (typeof value === 'string') {
		auth = value !== '' ? hasPermission(value) : true
	} else {
		auth = value.length > 0 ? value.some(item => hasPermission(item)) : true;
	}
	return auth
}

/**
 * 权限数据,如果传入为 array 时,全部匹配则鉴权通过,并显示 slot 内容
 * @param value
 * @returns {*}
 */
function authAll(value) {
	if (storeUserType == '0') {
		return true
	}
	if (value && value.constructor === Array) {
		return value.length > 0 ? value.every(item => hasPermission(item)) : true
	}
	return true;
}

export default {
	auth,
	authAll
}

在main.js中全局引入


// 权限
import plugins from '@/utils/plugins.js';
Vue.use(plugins);

 最后就可以在页面上使用了   

 v-auth="['admin-contract-barter-add']" 或 v-auth="admin-contract-barter-add" 

看别人写的这两种也行  但是我只有下面这种方法起作用了

<view class="go-publish" v-auth="['admin-add']" v-if="$auth(['admin-add'])" @click="goPublish1">
发布商品券
</view>

authAll表示必须有所有的权限才可以,缺一不可

 

<view v-authAll="['admin-add','admin-edit']" v-if="$authAll(['admin-add','admin-edit'])"></view>

 


http://www.niftyadmin.cn/n/5240676.html

相关文章

腾讯地图系列(二):微信小程序添加插件(三种方法)以及插件AppId获取

目录 第一章 前言 第二章 添加插件 2.1 微信小程序添加插件方法一&#xff08;微信公众平台添加插件&#xff09; 2.2 微信小程序添加插件方法二&#xff08;通过项目配置添加插件&#xff09; 2.3 微信小程序添加插件方法三&#xff08;微信公众平台服务市场添加插件&…

2分图匹配算法

定义 节点u直接无边&#xff0c;v之间无边&#xff0c;边只存在uv之间。判断方法&#xff1a;BFS染色法&#xff0c;全部染色后&#xff0c;相邻边不同色 无权二部图中的最大匹配 最大匹配即每一个都匹配上min&#xff08;u&#xff0c; v&#xff09;。贪心算法可能导致&…

xcode ——Instrumets(网络连接调试)使用

环境&#xff1a; instruments 使用只能在真机调试时使用&#xff0c;且真机系统必须ios15 点击debug 按钮——Network——Profile in Instruments 然后就可以看到如下面板 展开运行的项目&#xff0c;点击session下的域名&#xff0c;下方回出现该域名下的网络请求。点击Deve…

在KeyarchOS上体验WildFly

一、浪潮信息KeyarchOS简单介绍 KeyarchOS具备稳定可靠、高效软硬协同、全天候运维、安全可信等特性,增强了对云计算、人工智能等场景的支持,性能稳定性领先,生态完善,符合金融、政务、能源、交通、通信、教育、医疗等关键行业的应用要求。具备非常广泛的应用。 官方地址&…

【链表Linked List】力扣-83 删除排序链表中的重复元素

目录 题目描述 解题过程 题目描述 给定一个已排序的链表的头 head &#xff0c; 删除所有重复的元素&#xff0c;使每个元素只出现一次 。返回 已排序的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,1,2] 输出&#xff1a;[1,2]示例 2&#xff1a; 输入&#xff1…

黑马头条数据管理平台项目总结

今天主要看了该项目的介绍&#xff0c;这个黑马头条数据管理平台项目主要包括登录、用户的权限判断、文章内容列表的筛选和分页、文章的增删查改还有图片和富文本编辑器这几大部分组成&#xff0c;项目配套了素材代码&#xff0c;像资源文件、第三方插件、页面文件夹、工具插件…

基于Python+OpenCV的车道线和车辆检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 本文将介绍如何使用Python编程语言结合OpenCV库进行车道线和车辆检测。这种技术常用于计算机视觉领域&#xff0c;特…

第二十五章 控制到 XML 模式的映射 - 将文字属性映射到 XML 模式

文章目录 第二十五章 控制到 XML 模式的映射 - 将文字属性映射到 XML 模式将文字属性映射到 XML 模式IRIS 数据类型类的默认 XSD 类型 第二十五章 控制到 XML 模式的映射 - 将文字属性映射到 XML 模式 将文字属性映射到 XML 模式 本节讨论如何将文字&#xff08;非集合&#…