uniapp开发小程序,如何根据权限动态配置按钮或页面内容

前言

写了好几个项目,发现小程序对权限控制非常麻烦,于是有了这个想法,但是网上找了一圈没有一个比较完善的讲解,因为小程序不支持自定义指令,所以不能像后台那样方便,于是就将几个博主的想法结合。
思路就是v-if或者v-show,封装一个方法就行了。

使用方法

1.写权限验证js

找个地方建一个js文件,写权限验证函数,如下
注:代码验证的前提是将权限列表存储在缓存中了,所以我直接取出来验证。如有其他逻辑请自行更改。 至于权限列表从哪里来,就不在赘述了。

javascript 复制代码
import userStore from "../store/userStore.js"

// 验证用户是否含有指定权限,只需包含其中一个
export function auth(authList){
	return authList.some((item) => {
	  return verifySingleAuth(item);
	});
}

// 验证用户是否含有指定权限,必须全部拥有
export function authAll(authList){
	return authList.every((item) => {
	  return verifySingleAuth(item);
	});
}

//验证权限
function verifySingleAuth(permission){
	const store = userStore();
	const all_permission = '*:*:*';	//所有权限标识
	const permissions = store.permissions;
	if (permission && permission.length > 0) {
	  return permissions.some((v) => {
	    return all_permission === v || v === permission;
	  });
	} else {
	  return false;
	}
}

2.main.js中注册为全局变量(函数)

贴上代码

javascript 复制代码
	app.config.globalProperties.$auth=auth
	app.config.globalProperties.$authAll=authAll

3.页面中直接使用

缓存中的权限为'aa:*:*'

html 复制代码
<template>
	<view class="content">
		测试一验证结果:{{$auth(['aa:*:*','bb:*:*'])}}
		<view v-show="$auth(['aa:*:*','bb:*:*'])">
			<uv-button type="primary" shape="circle" text="按钮"></uv-button>
		</view>
	</view>
</template>

缓存中的权限为'aa:*:*'

html 复制代码
<template>
	<view class="content">
		全部权限验证结果:{{$authAll(['aa:*:*','bb:*:*'])}}
		<view v-show="$authAll(['aa:*:*','bb:*:*'])">
			<uv-button type="primary" shape="circle" text="按钮"></uv-button>
		</view>
	</view>
</template>

搞定,示例中使用的是v-show,当然,使用v-if也是可以的,但是我发现,每当页面有值变化时,都会重复的调用,而且会调很多次,我猜测应该是数据变化,会重新渲染Dom,导致重复判断,可能会导致性能下降或者卡顿,所以我选择使用v-show。

相关推荐
笨笨狗吞噬者4 小时前
【uniapp】小程序端实现分包异步化
前端·微信小程序·uni-app
2501_916008896 小时前
HTTPS 双向认证抓包实战,原理、难点、工具与可操作的排查流程
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915106326 小时前
HTTPS 能抓包吗?实战答案与逐步可行方案(HTTPS 抓包原理、证书Pinning双向认证应对、工具对比)
网络协议·http·ios·小程序·https·uni-app·iphone
游戏开发爱好者86 小时前
App HTTPS 抓包实战,原理、常见问题与可行工具路线(开发 测试 安全 角度)
网络协议·安全·ios·小程序·https·uni-app·iphone
2501_915106326 小时前
App HTTPS 抓包实战指南,原理、常见阻碍、逐步排查与工具组合
网络协议·http·ios·小程序·https·uni-app·iphone
Roye_ack8 小时前
【项目实战 Day7】springboot + vue 苍穹外卖系统(微信小程序 + 微信登录模块 完结)
spring boot·redis·后端·小程序·个人开发·学习方法·苍穹外卖
weixin_lynhgworld8 小时前
短剧小程序系统开发:引领影视行业数字化转型浪潮
大数据·小程序
流***陌10 小时前
一键预约上门服务:到家洗车小程序的便捷功能与场景化体验
小程序
说私域10 小时前
整合与超越:论“开源AI智能名片链动2+1模式S2B2C商城小程序”对传统红人直播带货模式的升维
人工智能·小程序
说私域10 小时前
定制开发开源AI智能名片S2B2C商城小程序新手引导教程的重要性与实施方法研究
人工智能·小程序·开源