前言

日常我們開(kāi)發(fā)小程序的時(shí)候，經(jīng)常需要考慮權(quán)限如何設(shè)計(jì)，比如在我的頁(yè)面，管理員可以看到一些菜單，而普通用戶(hù)可以看到另外一些菜單。那如何設(shè)計(jì)這種帶權(quán)限的功能呢？本文就以低代碼工具為例，看看低代碼中是如何設(shè)計(jì)小程序的權(quán)限的。

1 權(quán)限表設(shè)計(jì)

在通用的RBAC模型中，角色和權(quán)限對(duì)應(yīng)，用戶(hù)和角色對(duì)應(yīng)。這樣就實(shí)現(xiàn)了用戶(hù)可以訪問(wèn)哪些頁(yè)面的控制。小程序中我們可以做一些簡(jiǎn)化。我們只設(shè)計(jì)一張用戶(hù)表，用戶(hù)表里有個(gè)角色的字段，這里用戶(hù)注冊(cè)之后究竟是管理員還是普通用戶(hù)，我們可以自己進(jìn)行維護(hù)。

在做數(shù)據(jù)源設(shè)計(jì)的時(shí)候，需要注意的是角色這塊是需要設(shè)置成枚舉值，枚舉項(xiàng)我們添加兩項(xiàng)內(nèi)容，分別是普通用戶(hù)和管理員

2、創(chuàng)建應(yīng)用

為了實(shí)現(xiàn)小程序的權(quán)限功能，我們先需要?jiǎng)?chuàng)建一個(gè)應(yīng)用，類(lèi)型的話(huà)選擇小程序

3、頁(yè)面功能實(shí)現(xiàn)

在首頁(yè)我們先添加一個(gè)普通容器，里邊添加一個(gè)按鈕，和兩個(gè)文本

給普通容器設(shè)置flex布局，讓內(nèi)容都居中對(duì)齊

4、定義變量

為了顯示權(quán)限信息，我們需要定義兩個(gè)全局變量，第一個(gè)全局變量來(lái)區(qū)分用戶(hù)是否是注冊(cè)用戶(hù)，第二個(gè)全局變量用來(lái)區(qū)分是否是管理員

還需要定義一個(gè)變量用來(lái)存放用戶(hù)的openid

5、變量的初始化

是否是注冊(cè)用戶(hù)，需要根據(jù)當(dāng)前用戶(hù)的openid來(lái)去數(shù)據(jù)源查，如果返回?cái)?shù)據(jù)就說(shuō)明是注冊(cè)用戶(hù)，未返回就說(shuō)明未注冊(cè)。管理員的話(huà)直接根據(jù)數(shù)據(jù)的值做判斷就可以。代碼需要寫(xiě)在低碼編輯器的全局生命周期函數(shù)中

/**
 * 可通過(guò) app 獲取或修改全局應(yīng)用的 變量 狀態(tài) 等信息
 * 具體可以console.info 在編輯器Console面板查看更多信息
 * 如果需要 async-await，請(qǐng)?jiān)诜椒ㄇ?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
          }
        ]
      }, // 方法入?yún)?
    });
    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)
  }
}

變量初始化好了之后，我們就根據(jù)變量的值來(lái)控制組件的顯示，按鈕上綁定條件展示

第一個(gè)文本組件綁定條件展示，我們用兩個(gè)變量的組合來(lái)進(jìn)行判斷是否是注冊(cè)用戶(hù)并且是管理員

第二個(gè)文本組件綁定條件展示，也用變量的組合來(lái)控制，只不過(guò)如果是非管理員我們只要取反就可以

6、用戶(hù)注冊(cè)

可以新建一個(gè)注冊(cè)頁(yè)面，使用表單容器自動(dòng)生成字段

這里有兩個(gè)小技巧，我們可以設(shè)置角色默認(rèn)選中是普通用戶(hù)，openid從全局變量綁定

添加頁(yè)面這兩個(gè)字段對(duì)用戶(hù)不可見(jiàn)，我們可以將字段進(jìn)行隱藏，點(diǎn)擊樣式布局選中隱藏

回到首頁(yè)，我們給按鈕添加點(diǎn)擊事件，跳轉(zhuǎn)到注冊(cè)頁(yè)面

點(diǎn)擊注冊(cè)按鈕，錄入個(gè)人信息，點(diǎn)擊提交，再次刷新頁(yè)面的時(shí)候就展示了普通用戶(hù)的字段

我們可以在數(shù)據(jù)源里將角色修改為管理員，再次刷新頁(yè)面就顯示管理員

總結(jié)

我們用了一定的篇幅講解了一下小程序中的權(quán)限設(shè)計(jì)，當(dāng)然了這種方案還是比較簡(jiǎn)單的，現(xiàn)實(shí)中可能角色授權(quán)還更復(fù)雜一點(diǎn)，對(duì)于小程序來(lái)說(shuō)角色設(shè)計(jì)的簡(jiǎn)單一點(diǎn)，你的代碼就比較簡(jiǎn)單。設(shè)計(jì)的復(fù)雜了，可能就引入了更多的問(wèn)題，實(shí)際開(kāi)發(fā)中還需要做一個(gè)權(quán)衡。

到此這篇關(guān)于小程序中權(quán)限設(shè)計(jì)的文章就介紹到這了,更多相關(guān)小程序權(quán)限設(shè)計(jì)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論