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

先创建一个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>
相关推荐
谦哥8 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
心在飞扬23 分钟前
理解JS事件环(Event Loop)
前端·javascript
敲代码的玉米C26 分钟前
深入理解链表反转:从基础到进阶的完整指南
javascript
盏茶作酒2939 分钟前
打造自己的组件库(一)宏函数解析
前端·vue.js
山有木兮木有枝_1 小时前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
一大树1 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js
10年前端老司机1 小时前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星2 小时前
vue实现微信聊天emoji表情
前端·javascript
極光未晚2 小时前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin2 小时前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js