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>
相关推荐
Synmbrf几秒前
说说平时开发注意事项
javascript·面试·代码规范
前端大白话1 分钟前
前端必看!90% 工程师踩过的状态管理坑,useReducer 如何一招化解?
前端·javascript·react.js
前端大白话1 分钟前
揭秘 HTML 可拖动元素及拖放功能:HTML5 API 大起底
前端·javascript·html
Moment19 分钟前
通过爬取 B 站热门视频来带你彻底了解 Playwright 🤷🏿‍♂️🤷🏿‍♂️🤷🏿‍♂️
前端·javascript·后端
掘金安东尼1 小时前
🧭 前端周刊第411期(2025年4月21日–27日)
前端·javascript·面试
xuanjiong1 小时前
微信小程序,基于uni-app的轮播图制作,调用文件中图片
微信小程序·小程序·uni-app
阿珊和她的猫1 小时前
React 与 Vue 的区别:你会选择哪个框架呢
前端·vue.js·react.js
浪裡遊1 小时前
前端高频面试题day2
前端·javascript·vue.js
独立开阀者_FwtCoder1 小时前
Vue3 首款 3D 数字孪生编辑器 正式开源!
前端·javascript·vue.js