一文帶你瞭解小程序中的權限設計

Posted on by

前言

日常我們開發小程序的時候，經常需要考慮權限如何設計，比如在我的頁面，管理員可以看到一些菜單，而普通用戶可以看到另外一些菜單。那如何設計這種帶權限的功能呢？本文就以低代碼工具為例，看看低代碼中是如何設計小程序的權限的。

1 權限表設計

在通用的RBAC模型中，角色和權限對應，用戶和角色對應。這樣就實現瞭用戶可以訪問哪些頁面的控制。小程序中我們可以做一些簡化。我們隻設計一張用戶表，用戶表裡有個角色的字段，這裡用戶註冊之後究竟是管理員還是普通用戶，我們可以自己進行維護。

在做數據源設計的時候，需要註意的是角色這塊是需要設置成枚舉值，枚舉項我們添加兩項內容，分別是普通用戶和管理員

2、創建應用

為瞭實現小程序的權限功能，我們先需要創建一個應用，類型的話選擇小程序

3、頁面功能實現

在首頁我們先添加一個普通容器，裡邊添加一個按鈕，和兩個文本

給普通容器設置flex佈局，讓內容都居中對齊

4、定義變量

為瞭顯示權限信息，我們需要定義兩個全局變量，第一個全局變量來區分用戶是否是註冊用戶，第二個全局變量用來區分是否是管理員

還需要定義一個變量用來存放用戶的openid

5、變量的初始化

是否是註冊用戶，需要根據當前用戶的openid來去數據源查，如果返回數據就說明是註冊用戶，未返回就說明未註冊。管理員的話直接根據數據的值做判斷就可以。代碼需要寫在低碼編輯器的全局生命周期函數中

/**
 * 可通過 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從全局變量綁定

添加頁面這兩個字段對用戶不可見，我們可以將字段進行隱藏，點擊樣式佈局選中隱藏

回到首頁，我們給按鈕添加點擊事件，跳轉到註冊頁面

點擊註冊按鈕，錄入個人信息，點擊提交，再次刷新頁面的時候就展示瞭普通用戶的字段

我們可以在數據源裡將角色修改為管理員，再次刷新頁面就顯示管理員

總結

我們用瞭一定的篇幅講解瞭一下小程序中的權限設計，當然瞭這種方案還是比較簡單的，現實中可能角色授權還更復雜一點，對於小程序來說角色設計的簡單一點，你的代碼就比較簡單。設計的復雜瞭，可能就引入瞭更多的問題，實際開發中還需要做一個權衡。

到此這篇關於小程序中權限設計的文章就介紹到這瞭,更多相關小程序權限設計內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：