微搭低代码实现用户注册及权限控制

日常我们在开发小程序的时候,通常有这么一类型需求。我需要让用户注册,然后给分配一定的权限,具备权限的用户可以访问对应的页面。那低码中如何实现用户的注册及权限的控制呢?

1 设计数据源

要提供用户注册的功能,我们必须建立数据源来存储用户的信息。我们在收集用户信息的时候一般是采集用户的昵称和头像。还有一类信息是由管理员分配的,一般我们设计一个角色的字段来控制用户能做哪些操作

在这里插入图片描述
这里我们要讲解一下为啥要设计一个openid的字段,一般你使用小程序的时候,你的微信已经是登录的状态,openid这个字段就能标识你是哪一个人,我们这里通过openid这个字段来控制数据的权限

角色这块一般我们设置成枚举类型,可以在通用选项集里看到我们设计的枚举类型

在这里插入图片描述

2 全局变量

数据源设计好了之后,如果用户打开了我们的小程序,就需要根据当前用户的openid来去数据源里获取用户的信息。获取到的信息需要保存到全局变量里。

所谓的全局变量是在所有页面都可见,这样我们在其他页面做权限控制的时候就可以根据当前用户的角色来进行控制

打开应用编辑器,在变量里创建全局变量

在这里插入图片描述
我们的全局变量是一个对象,因为从数据源里获取的记录的类型就是对象

3 初始化用户信息

有了全局变量后就要考虑,如何初始化用户信息。在微搭中有生命周期函数的概念,对应着我们小程序的各种状态。比如我们希望一启动的时候就加载用户信息,那么就可以在小程序启动的时候加载,相应的代码如下:

export default {
    
    
  async onAppLaunch(launchOpts) {
    
    
    console.log('---------> LifeCycle onAppLaunch', launchOpts)
      const userInfo  = await $app.auth.getUserInfo();
    const result = await app.cloud.callModel({
    
    
      name: 'ryxx_5u6gw04', // 数据模型标识,可以前往「数据源 - 数据模型」列表页查看
      methodName: 'wedaGetRecords', // 数据模型方法标识,支持的方法可以前往「数据源 - 数据模型」的任一数据模型详情页查看当前模型支持的方法
      params: {
    
    
        where: [{
    
      // 或根据指定的条件
          key: "openid",
          rel: "eq", // 可选值有: eq(相等) neq(不相等) lt(小于) lte(小于或等于) gt(大于) gte(大于或等于) search(包含文字内容)
          val: userInfo.openId,
        }],
      },
    });
    
    console.log(result)
    if (result.total >= 1) {
    
    
      app.dataset.state.user = result.records[0]
    }
    console.log(app.dataset.state.user)
  },
  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)
  }
}

原来我们还需要通过云函数来获取用户的openid,随着产品的发展,现在已经提供了内置的方法可以直接获取了

const userInfo  = await $app.auth.getUserInfo();

这里的userInfo就是我们的用户登录信息,可以获取到用户的openid。为啥调用的时候要用await呢?因为这些方法都是异步方法,await是要求等待返回结果

代码的第二段是通过数据源的查询列表的API来找到用户的信息

const result = await app.cloud.callModel({
    
    
      name: 'ryxx_5u6gw04', // 数据模型标识,可以前往「数据源 - 数据模型」列表页查看
      methodName: 'wedaGetRecords', // 数据模型方法标识,支持的方法可以前往「数据源 - 数据模型」的任一数据模型详情页查看当前模型支持的方法
      params: {
    
    
        where: [{
    
      // 或根据指定的条件
          key: "openid",
          rel: "eq", // 可选值有: eq(相等) neq(不相等) lt(小于) lte(小于或等于) gt(大于) gte(大于或等于) search(包含文字内容)
          val: userInfo.openId,
        }],
      },
    });

这里的name是我们的数据模型的标识,methodName是我们的方法标识,我们这里调用了wedaGetRecords方法

params是我们的入参,通过构造where来制定我们的查询条件,Key相当于我们的字段标识,rel是表达式,我们这里使用eq表示相等的意思,val是我们传入的值,我们从userInfo里调取openId属性

数据源的方法执行后会返回一个对象,我们可以调用total属性来看获取到几条记录,如果获取的记录大于等于1就表明这个用户已经是注册过了,那么我们就取第一条记录赋值给我们的全局变量

if (result.total >= 1) {
    
    
      app.dataset.state.user = result.records[0]
    }

这里records是一个数组类型,数组获取具体的元素的时候可以使用中括号加下标的方式,数组的下标是从0开始的

4 用户注册

一般我们需要给一个页面提供用户注册,因为小程序API的限制,微搭提供了组件直接可以调用对应的昵称和头像,我们使用表单容器来读取我们的用户信息,自动生成页面

在这里插入图片描述
昵称可以打开读取微信昵称的配置
在这里插入图片描述
打开了配置之后,当你在小程序录入信息的时候就会自动的调取你的昵称和头像

5 权限控制

因为我们程序里已经通过全局变量来获取到用户的注册信息,那你在控制权限的时候就可以直接读取角色这个字段,按照你自己的业务逻辑来控制

比如某些按钮是具备相应角色的人员才可以使用

在这里插入图片描述

总结

我们本篇带着大家实现了低代码中用户注册及权限控制的功能,当然了不同人使用低码的方法和路径都是不一样的,你可以把我的方法做一个参考,希望能给你带来一定的启发和帮助。

猜你喜欢

转载自blog.csdn.net/u012877217/article/details/129811786