订水商城H5实战教程-05权限控制

简介: 订水商城H5实战教程-05权限控制


我们上一篇讲解了用户注册的功能,当用户注册完毕的时候再次打开小程序的时候就需要验证权限。权限分为两类,第一类是判断用户是否注册,第二类是当前用户具备什么角色,可以访问哪些功能。

1 判断用户是否登录

当前用户在打开小程序的时候,如何判断用户是否登录呢?这就要用到页面的生命周期函数。所谓生命周期,是指从小程序启动、打开、关闭全过程可以触发的事件。

打开我们的自定义应用,点击页面管理,点击事件

有两个事件可供设置,一个是页面加载一个是页面显示。那要在哪个事件里配置呢?一般是放在页面显示里,因为页面加载只执行一次,如果在其他页面改变了用户的状态,再次回到首页的时候事件就不执行了。

点击页面显示,我们设置一下调用数据源方法

然后选择用户信息数据源,方法选择查询单条

然后设置查询条件,让我们的创建人等于我们当前登录用户的userid

查询结果需要赋值给一个对象,我们在左侧的代码区新建一个全局变量user,类型选择对象

然后将出参赋值给我们的user对象

赋值成功后,增加一个分支事件

给逻辑分支增加判断条件

If(Object.keys($w.app.dataset.state.user).length>0, true, false)

表达式的意思是判断对象的属性是否为空,如果不为空返回true,为空返回false

在条件满足时,我们给变量isLogin赋值为true,不满足是赋值为false

2 创建事件流

现在设置在页面显示事件,有个问题是弹窗会一闪而过,我们在页面加载的时候也设置一下权限判断的逻辑。

但这种重复设置一遍就有点啰嗦了,在微搭中像这种很多地方都需要调用的,我们可以把设置放入事件流里。

在左侧代码区里新建一个事件流

设置方法和我们上边的保持一致

在页面加载的时候调用一下事件流

3 获取不到Userid的问题

实际测试,按照这种方案去做存在的问题是拿不到用户的Userid,创建人的话会自动分配一个ID

为了解决这个问题可以有两种方案,一种是切换成小程序,用小程序的openid来实现权限的过滤,另外一种是设置登录访问,在应用左侧的导航面板我们切换到应用设置-访问控制,启用我们的登录后访问即可

这样用户在打开应用的时候要先获取验证码,然后再使用功能就可以正常获取到Userid了

4 权限控制

登录问题解决后我们就需要判断一下用户的角色了,因为我们的用户是需要等待管理员审核开通的,那就先需要从用户的状态获取一下显示信息

在首页加入两个普通容器,每个普通容器放置一个文本组件

第一个文本组件的内容改为已经申请,请等待管理员审核,第二个文本组件的内容改为审核通过

在第一个普通容器绑定条件展示,当我们的状态为1的时候显示

给第二个普通容器绑定条件展示,当我们的状态为2的时候显示

整体效果

先登录首页,提示用户需要注册,注册返回首页,显示等待管理员审核,审核完毕后再次打开页面显示审核通过

相关文章
|
数据库
kettle开发篇-合并记录
kettle开发篇-合并记录
1570 0
|
移动开发 前端开发 JavaScript
H5 页面与 Web 页面的制作方法
H5页面制作利用HTML5、CSS3和JavaScript技术,结合H5编辑器或框架(如Adobe Dreamweaver、Ionic),注重移动设备兼容性与响应式布局。Web页面制作则基于传统HTML、CSS和JavaScript,借助文本编辑器或IDE完成开发。两者区别在于技术版本、交互性和浏览器支持:H5更互动、现代,但可能不兼容旧浏览器;Web页面更静态、兼容性广。根据需求选择:高交互选H5,广泛兼容选Web。
1747 6
|
10月前
|
机器学习/深度学习 安全 API
通过UID非法获取手机号的违法行为与技术逻辑剖析别异想天开了-优雅草卓伊凡
通过UID非法获取手机号的违法行为与技术逻辑剖析别异想天开了-优雅草卓伊凡
3066 0
通过UID非法获取手机号的违法行为与技术逻辑剖析别异想天开了-优雅草卓伊凡
|
边缘计算 安全 数据安全/隐私保护
一个pcdn产品体验
闲置宽带还能赚钱?听起来是不是很神奇?作为一名普通打工人,我最近入手了负三云这个“小盒子”,体验后直呼真香!只需将其连接路由器,就能利用闲置带宽获取收益。我家100M宽带,每天稳定收入5-8元,一个月轻松赚200+,完全覆盖网费。安装简单、不影响网速,功耗低且安全可靠。如果你也想尝试边缘计算,低成本的负三云绝对值得一试!
4716 0
|
SQL 存储 关系型数据库
【赵渝强老师】Hive的内部表与外部表
Hive是基于HDFS的数据仓库,支持SQL查询。其数据模型包括内部表、外部表、分区表、临时表和桶表。本文介绍了如何创建和使用内部表和外部表,提供了详细的步骤和示例代码,并附有视频讲解。
1046 1
WK
|
机器学习/深度学习 监控 算法
反向传播算法是如何工作的
反向传播算法通过最小化损失函数优化神经网络。首先,输入数据经由前向传播得到预测结果,并计算损失;接着,反向传播计算各参数的梯度,并利用梯度下降法更新权重和偏置。这一过程反复进行,直至满足停止条件。算法具备高效性、灵活性及可扩展性,能处理复杂模式识别与预测任务,适用于不同类型与规模的神经网络,显著提升了模型的预测准确性和泛化能力。
WK
813 3
|
人工智能 前端开发 JavaScript
阿里云安全类云产品,验证码使用时滑动验证流程及线上问题排查
阿里云验证码产品,使用业界先进的风控引擎结合“规则+AI”模型,有效区分真实用户和机器自动化脚本攻击,避免机器请求造成业务损失。主要适用于垃圾注册、刷库撞库,薅羊毛,短信被刷等风险场景。为您提供安全可靠的业务环境。本文为大家介绍验证码使用时滑动验证流程及验证不通过的问题排查。
66978 5
阿里云安全类云产品,验证码使用时滑动验证流程及线上问题排查
|
JavaScript 前端开发 数据安全/隐私保护
雪球JS逆向:阿里系加密acw_sc__v2和反debugger
雪球JS逆向:阿里系加密acw_sc__v2和反debugger
2950 1
|
前端开发 JavaScript
前端模拟接口工具推荐——Apifox(mock数据)【图解教程】
前端模拟接口工具推荐——Apifox(mock数据)【图解教程】
5303 1