一文带你了解小程序中的权限设计

网友投稿 356 2023-11-13

−目录前言1 权限表设计2、创建应用3、页面功能实现4、定义变量5、变量的初始化6、用户注册总结

前言

日常我们开发小程序的时候，经常需要考虑权限如何设计，比如在我的页面，管理员可以看到一些菜单，而普通用户可以看到另外一些菜单。那如何设计这种带权限的功能呢？本文就以低代码工具为例，看看低代码中是如何设计小程序的权限的。

1 权限表设计

一文带你了解小程序中的权限设计

在通用的RBAC模型中，角色和权限对应，用户和角色对应。这样就实现了用户可以访问哪些页面的控制。小程序中我们可以做一些简化。我们只设计一张用户表，用户表里有个角色的字段，这里用户注册之后究竟是管理员还是普通用户，我们可以自己进行维护。

在做数据源设计的时候，需要注意的是角色这块是需要设置成枚举值，枚举项我们添加两项内容，分别是普通用户和管理员

2、创建应用

为了实现小程序的权限功能，我们先需要创建一个应用，类型的话选择小程序

3、页面功能实现

在首页我们先添加一个普通容器，里边添加一个按钮，和两个文本

给普通容器设置flex布局，让内容都居中对齐

4、定义变量

为了显示权限信息，我们需要定义两个全局变量，第一个全局变量来区分用户是否是注册用户，第二个全局变量用来区分是否是管理员

还需要定义一个变量用来存放用户的openid

5、变量的初始化

是否是注册用户，需要根据当前用户的openid来去数据源查，如果返回数据就说明是注册用户，未返回就说明未注册。管理员的话直接根据数据的值做判断就可以。代码需要写在低码编辑器的全局生命周期函数中

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/**
* 可通过 app 获取或修改全局应用的 变量 状态 等信息
* 具体可以console.info 在编辑器Console面板查看更多信息
* 如果需要 async-await，请在方法前 async
**/
export default {
async onAppLaunch(launchOpts) {
//console.log(---------> LifeCycle onAppLaunch, launchOpts)
const { OPENID, FROM_OPENID } = await app.utils.getWXContext()
let userId = FROM_OPENID || OPENID
if (!userId) {
console.log("userId",userId)
const { wedaId } = await app.cloud.getUserInfo()
userId = wedaId
}
app.dataset.state.openid = userId
console.log("openid",app.dataset.state.openid)
const result = await app.cloud.callModel({
name: yhb_0xbca5z,
methodName: wedaGetRecords,
params: {
"where": [
{
"key": "openid",
"rel": "eq",
"val": app.dataset.state.openid
}
]
}, // 方法入参
});
if(result.total>=1){
app.dataset.state.isRegister = true
let role = result.records[0].js
console.log("role",role)
if(role=="2"){
app.dataset.state.isAdmin = true
}else{
app.dataset.state.isAdmin = false
}
}else{
app.dataset.state.isRegister = false
}
},
onAppShow(appShowOpts) {
//console.log(---------> LifeCycle onAppShow, appShowOpts)
},
onAppHide() {
//console.log(---------> LifeCycle onAppHide)
},
onAppError(options) {
//console.log(---------> LifeCycle onAppError, options)
},
onAppPageNotFound(options) {
//console.log(---------> LifeCycle onAppPageNotFound, options)
},
onAppUnhandledRejection(options) {
//console.log(---------> LifeCycle onAppUnhandledRejection, options)
}
}

变量初始化好了之后，我们就根据变量的值来控制组件的显示，按钮上绑定条件展示

第一个文本组件绑定条件展示，我们用两个变量的组合来进行判断是否是注册用户并且是管理员

第二个文本组件绑定条件展示，也用变量的组合来控制，只不过如果是非管理员我们只要取反就可以

6、用户注册

可以新建一个注册页面，使用表单容器自动生成字段

这里有两个小技巧，我们可以设置角色默认选中是普通用户，openid从全局变量绑定

添加页面这两个字段对用户不可见，我们可以将字段进行隐藏，点击样式布局选中隐藏

回到首页，我们给按钮添加点击事件，跳转到注册页面

点击注册按钮，录入个人信息，点击提交，再次刷新页面的时候就展示了普通用户的字段

我们可以在数据源里将角色修改为管理员，再次刷新页面就显示管理员

总结

我们用了一定的篇幅讲解了一下小程序中的权限设计，当然了这种方案还是比较简单的，现实中可能角色授权还更复杂一点，对于小程序来说角色设计的简单一点，你的代码就比较简单。设计的复杂了，可能就引入了更多的问题，实际开发中还需要做一个权衡。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 小程序 js 容器 方法
上一篇:手机APP开发与小程序互联，打造属于你的商业帝国
下一篇:农产品APP开发前景如何？
相关文章

 发表评论

暂时没有评论，来抢沙发吧~