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>
相关推荐
一头小鹿几秒前
Vue 和 React中的状态管理机制
vue.js·react.js
jqq6661 分钟前
Vue3脚手架实现(七、渲染eslint配置)
前端·javascript·vue.js
Mintopia3 分钟前
BVH:光线追踪里的空间管家
前端·javascript·计算机图形学
Mintopia9 分钟前
Three.js 射线拾取原理:像素世界的侦探故事
前端·javascript·计算机图形学
天天鸭42 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
racerun1 小时前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
江城开朗的豌豆1 小时前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了1 小时前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
XM-54581 小时前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序