位置：首页-资讯-前端开发

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

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

前言

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

1 权限表设计

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

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

2、创建应用

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

3、页面功能实现

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

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

4、定义变量

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

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

5、变量的初始化

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


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)
  }
}