When we develop small programs every day, we usually have such a type of demand. I need to let users register, and then assign certain permissions, and users with permissions can access the corresponding pages. How to realize user registration and permission control in low code?
1 Design data source
To provide user registration functionality, we must create a data source to store user information. When we collect user information, we generally collect user nicknames and avatars. Another type of information is assigned by the administrator. Generally, we design a role field to control what operations the user can do
Here we want to explain why we need to design an openid field. Generally, when you use the applet, your WeChat is already logged in. The openid field can identify who you are. Here we use the openid field to Control data permissions
Generally, we set the role as an enumeration type, and you can see the enumeration type we designed in the general option set
2 Global variables
After the data source is designed, if the user opens our applet, it needs to go to the data source to obtain the user's information according to the current user's openid. The obtained information needs to be saved in a global variable.
The so-called global variables are visible on all pages, so that when we do permission control on other pages, we can control them according to the role of the current user
Open the application editor and create a global variable in Variables
Our global variable is an object, because the type of record obtained from the data source is an object
3 Initialize user information
After you have global variables, you need to consider how to initialize user information. There is a concept of life cycle function in the micro-build, which corresponds to various states of our applet. For example, if we want to load user information at startup, we can load it when the applet starts. The corresponding code is as follows:
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)
}
}
It turns out that we still need to obtain the user's openid through the cloud function. With the development of the product, a built-in method has been provided to obtain it directly.
const userInfo = await $app.auth.getUserInfo();
The userInfo here is our user login information, and the user's openid can be obtained. Why use await when calling? Because these methods are asynchronous methods, await is required to wait for the return result
The second paragraph of the code is to find the user's information through the query list API of the data source
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,
}],
},
});
The name here is the identifier of our data model, methodName is our method identifier, we call the wedaGetRecords method here
params is our input parameter, we formulate our query conditions by constructing where, Key is equivalent to our field identifier, rel is an expression, we use eq here to mean equal, val is the value we pass in, we get from userInfo Call the openId attribute in
After the method of the data source is executed, an object will be returned. We can call the total property to see how many records have been obtained. If the obtained record is greater than or equal to 1, it means that the user has already registered, then we will take the first record and assign it to our global variable
if (result.total >= 1) {
app.dataset.state.user = result.records[0]
}
Here records is an array type. When obtaining specific elements of an array, you can use square brackets to add subscripts. The subscripts of the array start from 0.
4 User Registration
Generally, we need to provide user registration for a page. Due to the limitation of the mini-program API, WeTake provides components that can directly call the corresponding nickname and avatar. We use the form container to read our user information and automatically generate the page
Nickname can be opened to read the configuration of WeChat nickname.
After opening the configuration, when you enter information in the applet, your nickname and avatar will be automatically called
5 Access control
Because our program has obtained the user's registration information through global variables, then you can directly read the role field when controlling permissions, and control it according to your own business logic
For example, some buttons can only be used by personnel with corresponding roles.
Summarize
In this article, we take you to realize the functions of user registration and permission control in low-code. Of course, different people use low-code methods and paths are different. You can use my method as a reference, and I hope it can give you Bring some inspiration and help.