uniapp功能权限判断$auth.auth $auth.role显示判断生成源码

于 2024-08-11 11:04:47 发布
阅读量450 收藏 8
点赞数 5
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luck332/article/details/141102799
版权

在uniapp中，实现界面元素的条件显示或隐藏，主要依赖于Vue的数据绑定和条件渲染指令。这通常与权限管理不同，因为权限管理更多地关注于应用是否有权访问某些功能或数据，而条件渲染则是基于应用内部的状态或逻辑来决定界面元素的显示状态。

主要就是我们在登录时，要增加用户的权限标识，比如permissions具体到哪个功能按钮权限，roles角色权限。

this.$session.setUser({
 token: '1231231',
 username: '123213',
 permissions:['gongneng1',"gongneng2","gongneng3","gongneng4"],
 roles:['admin']
 })

判断功能权限

功能权限判断核心代码：$auth.auth('某个功能')。

如果你们增加了某个功能权限设置进了我们可以直接在界面显示判断里增加判断增加类似以下代码{{$auth.auth('gongneng1')}}。gongneng1是上面permissions功能标识里其中一个功能。

比如是否具有某个功能权限。

判断角色权限

角色判断核心代码：$auth.role('某个角色')

有些功能可能不需要具体到哪个功能点，只需要判断是否有哪个角色。比如可能有管理员、商家、会员这三种角色，不同角色也是需要显示不同菜单的。我们就可以用$auth.role('admin')。其中里面的admin是roles角色英文标识。

权限判断方法来源

更多$auth相关用法，我们可以打开common/Auth.js里代码实现。然后参照上方的显示判断配置自己的显示功能判断。

代码生成

上方条件设置完成后，我们可以保存源码至本地就可以进行功能权限测试了。

 

<template>
	<view class="container container23285">
		<view v-if="$auth.role('admin')" class="flex flex-wrap diygw-col-24 flex5-clz">
			<view class="flex diygw-col-12 items-center flex-nowrap flex2-clz">
				<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center flex7-clz">
					<text class="flex icon2 diygw-col-0 diy-icon-lihe"></text>
				</view>
				<view class="flex flex-wrap diygw-col-0 flex-direction-column flex6-clz">
					<text class="diygw-text-line1 diygw-col-24 text4-clz"> AI编程 </text>
					<text class="diygw-text-line1 diygw-col-24"> 智能编程高效学习 </text>
				</view>
			</view>
			<view class="flex diygw-col-12 items-center flex-nowrap flex-clz">
				<view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center flex1-clz">
					<text class="flex icon7 diygw-col-0 diy-icon-youxi"></text>
				</view>
				<view class="flex flex-wrap diygw-col-0 flex-direction-column flex13-clz">
					<text class="diygw-text-line1 diygw-col-24 text-clz"> AI编程 </text>
					<text class="diygw-text-line1 diygw-col-24"> 智能编程高效学习 </text>
				</view>
			</view>
		</view>
		<view v-if="$auth.auth('gongneng1')" class="flex flex-wrap diygw-col-24 flex11-clz">
			<view class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex12-clz">
				<text class="diygw-text-line1 diygw-col-24 text6-clz diygw-ellipsis"> 订单管理 </text>
				<text class="diygw-text-line1 diygw-col-24 diygw-ellipsis"> 10条 </text>
				<text class="flex icon diygw-col-0 icon-clz diy-icon-goodsnewfill"></text>
			</view>
			<view class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex14-clz">
				<text class="diygw-text-line1 diygw-col-24 text9-clz diygw-ellipsis"> 售后管理 </text>
				<text class="diygw-text-line1 diygw-col-24 diygw-ellipsis"> 10条 </text>
				<text class="flex icon4 diygw-col-0 icon4-clz diy-icon-servicefill"></text>
			</view>
			<view class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex17-clz">
				<text class="diygw-text-line1 diygw-col-24 text7-clz diygw-ellipsis"> 消息管理 </text>
				<text class="diygw-text-line1 diygw-col-24 diygw-ellipsis"> 10条 </text>
				<text class="flex icon5 diygw-col-0 icon5-clz diy-icon-commentfill"></text>
			</view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: { isshow: false }
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {}
		}
	};
</script>

<style lang="scss" scoped>
	.flex5-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex2-clz {
		padding-top: 16rpx;
		border-bottom-left-radius: 12rpx;
		padding-left: 16rpx;
		padding-bottom: 16rpx;
		border-top-right-radius: 12rpx;
		margin-right: 10rpx;
		background-color: #f7faff;
		margin-left: 10rpx;
		overflow: hidden;
		width: calc(50% - 10rpx - 10rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		padding-right: 16rpx;
	}
	.flex7-clz {
		padding-top: 20rpx;
		border-bottom-left-radius: 120rpx;
		color: #3d65ff;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		border-top-right-radius: 120rpx;
		background-color: #e2efff;
		flex-shrink: 0;
		overflow: hidden;
		width: 96rpx !important;
		border-top-left-radius: 120rpx;
		border-bottom-right-radius: 120rpx;
		height: 96rpx !important;
		padding-right: 20rpx;
	}
	.icon2 {
		font-size: 52rpx;
	}
	.flex6-clz {
		padding-top: 10rpx;
		flex: 1;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.text4-clz {
		font-weight: bold;
		font-size: 28rpx !important;
	}
	.flex-clz {
		padding-top: 16rpx;
		border-bottom-left-radius: 12rpx;
		padding-left: 16rpx;
		padding-bottom: 16rpx;
		border-top-right-radius: 12rpx;
		margin-right: 10rpx;
		background-color: #f7faff;
		margin-left: 10rpx;
		overflow: hidden;
		width: calc(50% - 10rpx - 10rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		padding-right: 16rpx;
	}
	.flex1-clz {
		padding-top: 20rpx;
		border-bottom-left-radius: 120rpx;
		color: #9156fd;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		border-top-right-radius: 120rpx;
		background-color: #f1effd;
		flex-shrink: 0;
		overflow: hidden;
		width: 96rpx !important;
		border-top-left-radius: 120rpx;
		border-bottom-right-radius: 120rpx;
		height: 96rpx !important;
		padding-right: 20rpx;
	}
	.icon7 {
		font-size: 52rpx;
	}
	.flex13-clz {
		padding-top: 10rpx;
		flex: 1;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.text-clz {
		font-weight: bold;
		font-size: 28rpx !important;
	}
	.flex11-clz {
		padding-top: 10rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 10rpx;
	}
	.flex12-clz {
		padding-top: 20rpx;
		border-bottom-left-radius: 12rpx;
		color: #ff5c47;
		padding-left: 20rpx;
		padding-bottom: 40rpx;
		border-top-right-radius: 12rpx;
		margin-right: 10rpx;
		background-color: #ffecee;
		margin-left: 10rpx;
		flex-shrink: 0;
		overflow: hidden;
		width: calc(33.3333333333% - 10rpx - 10rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		padding-right: 20rpx;
	}
	.text6-clz {
		font-weight: bold;
		font-size: 28rpx !important;
	}
	.icon-clz {
		bottom: 0rpx;
		position: absolute;
		right: 0rpx;
	}
	.icon {
		font-size: 64rpx;
	}
	.flex14-clz {
		padding-top: 20rpx;
		border-bottom-left-radius: 12rpx;
		color: #03afe7;
		padding-left: 20rpx;
		padding-bottom: 40rpx;
		border-top-right-radius: 12rpx;
		margin-right: 10rpx;
		background-color: #dff6fe;
		margin-left: 10rpx;
		flex-shrink: 0;
		overflow: hidden;
		width: calc(33.3333333333% - 10rpx - 10rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		padding-right: 20rpx;
	}
	.text9-clz {
		font-weight: bold;
		font-size: 28rpx !important;
	}
	.icon4-clz {
		bottom: 0rpx;
		position: absolute;
		right: 0rpx;
	}
	.icon4 {
		font-size: 64rpx;
	}
	.flex17-clz {
		padding-top: 20rpx;
		border-bottom-left-radius: 12rpx;
		color: #8669ff;
		padding-left: 20rpx;
		padding-bottom: 40rpx;
		border-top-right-radius: 12rpx;
		margin-right: 10rpx;
		background-color: #f4edfd;
		margin-left: 10rpx;
		flex-shrink: 0;
		overflow: hidden;
		width: calc(33.3333333333% - 10rpx - 10rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		padding-right: 20rpx;
	}
	.text7-clz {
		font-weight: bold;
		font-size: 28rpx !important;
	}
	.icon5-clz {
		bottom: 0rpx;
		position: absolute;
		right: 0rpx;
	}
	.icon5 {
		font-size: 64rpx;
	}
	.container23285 {
	}
</style>

diygwcom
关注
django.contrib.auth之authenticate函数源码分析
日复一日，年复一年
11-04 3526
引言django提供了一个默认的auth系统用于用户的登录和授权，并提供了一定的扩展性，允许开发者自行定义多个验证后台，每个验证后台必须实现authenticate函数，并返回None或者User对象。默认的后台是django.contrib.auth.backends.ModelBackend，该后台通过用户名和密码进行用户的验证，以settings.AUTH_USER_MODEL作为模型。但是在
uni-app学习笔记之判断当前用户是否拥有某角色和权限
紫微斗数学习交流
02-24 1848
传送门 此功能依赖uni-id 需要应用关联uniCloud服务空间并使用uni-id 需要在token内缓存角色权限才可使用 (自uni-id 3.0.0起，支持在token内缓存用户的角色权限，默认开启此功能) 一.uniIDHasRole(“admin”) 判断当前用户是否拥有某角色 在模板内使用 <template> <view v-if="uniIDHasRole('admin')">仅管理员可见</view> </template>
uniapp App权限判断和提示
Intellectual__的博客
08-03 1547
strStatus = "被永久拒绝权限"strStatus = "已获得授权"strStatus = "未获得授权"2、导出到需要判断的项目里面。3，判断是否开启权限。
uniapp编译app的应用权限判断
最新发布
weixin_52507918的博客
05-26 394
在uniapp开发中，我们开发编译app时，经常会用到用户手机的一些权限功能，以下是我开发中关于该功能的一些记录，希望可以帮到大家。 判断当前操作系统名称 uni.getSystemInfoSync const os = uni.getSystemInfoSync().osName; console.log(os, '苹果还是安卓系统'); // android 或 ios 安卓常用权限--对应权限码 在开发中肯定不止这些权限，这也是我搜的别人的常用权限，如需额
uniapp权限检测
crsitin_spade的博客
12-21 2771
uniapp设备权限申请前提示
uniapp安卓各权限说明及判断是否开启权限
wsdf222的博客
12-08 4414
方法可封装引入全局判断，也可在单个页面使用，为了应对各大安卓应用市场上架需要弹出权限说明框。判断是否权限（可多选）
Frog-Auth-源码.rar
10-10
源码中可能会包含如何定义角色、分配权限、检查用户是否有执行特定操作的权限等功能。 再者，源码中可能包含了会话管理(Session Management)。这部分代码会处理用户的登录状态，维护会话的有效性，并处理会话过期、...
TP好用的权限分类Auth
12-31
标题中的"TP好用的权限分类Auth"指的是ThinkPHP框架中的一个权限管理组件，Auth。在ThinkPHP这个流行的PHP开发框架中，Auth类是用于实现基于角色的访问控制（Role-Based Access Control，简称RBAC）的一种高效解决...
userauth-master.rar
10-09
这可能涉及到角色基础的授权（Role-Based Access Control, RBAC）、权限控制列表（Access Control List, ACL）等机制。 3. **会话管理（Session Management）**：用户成功登录后，系统会创建一个会话来跟踪用户的...
stackstorm 26. 源码分析之----stackstorm的auth服务分析
qingyuanluofeng的专栏
04-13 794
目标: 弄清楚st2auth的原理 1 总入口 发送auth校验请求的url样例如下: http://st2auth:9100/tokens 被st2auth服务接收到该请求后，进入如下代码: st2/st2auth/st2auth/controllers/v1/root.py 代码如下: from st2auth.controllers.v1 import auth class RootC...
uniapp ios 安卓权限判断，未获取权限跳转设置权限，话不多说直接上代码
Lsir1998的博客
05-11 3957
uniapp 安卓以及ios权限判断，为获取权限直接跳转设置可以开启关闭对应权限
uniapp：查询APP是否开启通知权限
sunluyi的博客
07-31 862
uniapp 查询是否开启通知权限，未开通，提示去开启并跳转设置。
uniapp项目APP端安卓ios权限检测教程
JackChan
05-10 335
uniapp项目APP端安卓ios权限检测教程
uniapp获取当前位置及检测授权状态
Smile_ping的博客
04-26 3192
uniapp App端获取当前位置、检测当前定位是否授权，并给予弹窗提示用户；
uniapp框架配置（拦截器、跨域）及使用
春晨秋遇的博客
08-18 4294
拦截器、跨域问题、接口添加权限、续签、接口使用
uniapp 判断安卓iOS权限
liluo101的博客
11-29 5503
uniapp 权限
若依前端vue角色、权限判断
qq_38571601的博客
03-21 2496
若依前端vue角色、权限判断
uni-app之微信小程序权限判断
sqf251877543的博客
06-11 1582
需求：微信小程序弹出权限询问前先弹出授权说明告知收集权限目的权限判断封装到PermissionManager.js文件中： 这里以 uni.saveImageToPhotosAlbum 这个api为例，在使用uni.saveImageToPhotosAlbum这个api前先判断权限：............
val:$app.auth.currentUser.openId
06-02
根据该变量的命名方式，它可能是一个在小程序或者APP中使用的...在小程序或者APP中，获取用户的OpenID可以用于实现一些个性化的功能，比如用户身份验证、数据统计等等。具体实现方式可能因不同的开发语言和框架而异。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值