一文帶你了解小程序中的權(quán)限設(shè)計
前言
日常我們開發(fā)小程序的時候,經(jīng)常需要考慮權(quán)限如何設(shè)計,比如在我的頁面,管理員可以看到一些菜單,而普通用戶可以看到另外一些菜單。那如何設(shè)計這種帶權(quán)限的功能呢?本文就以低代碼工具為例,看看低代碼中是如何設(shè)計小程序的權(quán)限的。
1 權(quán)限表設(shè)計
在通用的RBAC模型中,角色和權(quán)限對應(yīng),用戶和角色對應(yīng)。這樣就實現(xiàn)了用戶可以訪問哪些頁面的控制。小程序中我們可以做一些簡化。我們只設(shè)計一張用戶表,用戶表里有個角色的字段,這里用戶注冊之后究竟是管理員還是普通用戶,我們可以自己進(jìn)行維護(hù)。

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

2、創(chuàng)建應(yīng)用
為了實現(xiàn)小程序的權(quán)限功能,我們先需要創(chuàng)建一個應(yīng)用,類型的話選擇小程序

3、頁面功能實現(xiàn)
在首頁我們先添加一個普通容器,里邊添加一個按鈕,和兩個文本

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

4、定義變量
為了顯示權(quán)限信息,我們需要定義兩個全局變量,第一個全局變量來區(qū)分用戶是否是注冊用戶,第二個全局變量用來區(qū)分是否是管理員


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

5、變量的初始化
是否是注冊用戶,需要根據(jù)當(dāng)前用戶的openid來去數(shù)據(jù)源查,如果返回數(shù)據(jù)就說明是注冊用戶,未返回就說明未注冊。管理員的話直接根據(jù)數(shù)據(jù)的值做判斷就可以。代碼需要寫在低碼編輯器的全局生命周期函數(shù)中
/**
* 可通過 app 獲取或修改全局應(yīng)用的 變量 狀態(tài) 等信息
* 具體可以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
}
]
}, // 方法入?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ù)變量的值來控制組件的顯示,按鈕上綁定條件展示

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

第二個文本組件綁定條件展示,也用變量的組合來控制,只不過如果是非管理員我們只要取反就可以

6、用戶注冊
可以新建一個注冊頁面,使用表單容器自動生成字段

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


添加頁面這兩個字段對用戶不可見,我們可以將字段進(jìn)行隱藏,點擊樣式布局選中隱藏

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

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

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


總結(jié)
我們用了一定的篇幅講解了一下小程序中的權(quán)限設(shè)計,當(dāng)然了這種方案還是比較簡單的,現(xiàn)實中可能角色授權(quán)還更復(fù)雜一點,對于小程序來說角色設(shè)計的簡單一點,你的代碼就比較簡單。設(shè)計的復(fù)雜了,可能就引入了更多的問題,實際開發(fā)中還需要做一個權(quán)衡。
到此這篇關(guān)于小程序中權(quán)限設(shè)計的文章就介紹到這了,更多相關(guān)小程序權(quán)限設(shè)計內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS中split()用法(將字符串按指定符號分割成數(shù)組)
這篇文章主要介紹了JS中split()用法(將字符串按指定符號分割成數(shù)組)的相關(guān)資料,非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-10-10
純JS實現(xiàn)根據(jù)CSS的class選擇DOM
這篇文章主要介紹了純JS實現(xiàn)根據(jù)CSS的class選擇DOM,需要的朋友可以參考下2014-03-03
更改BootStrap popover的默認(rèn)樣式及popover簡單用法
這篇文章主要介紹了更改BootStrap popover的默認(rèn)樣式及popover簡單用法,需要的朋友可以參考下2018-09-09

