Shulou(Shulou.com)06/01 Report--

The main content of this article is to explain "WeChat Mini Programs development login authentication how to achieve", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "WeChat Mini Programs development login authentication how to achieve" it!

Requirements description:

For some pages to add login authentication, if the user is not logged in, go to the page, the page automatically turns to the login page. After the login verification is successful, call back to the login initiation page.

The idea of realization is:

Create global variables to store the current login user object (userInfo), global methods to verify login validity (checkLoginInfo ()), and global methods to get the full path of the current page (getCurrentUrl ()).

For the page page.onLoad event that needs to add login restrictions, call the checkLoginInfo () method to determine the current login status. If you are not logged in, the page goes to the login page.

After the login verification is passed, store the login information in the global variable userInfo and jump back to the login initiation page.

Key codes and precautions:

App.js

Data: {

UserInfo:null,// user logs in to the storage object

LoginUrl:../login/login

}

CheckLoginInfo:function (url) {/ / verify login status

If (this.data.userInfo==null) {

Return url

} else {

Return

}

}

GetCurrentUrl:function () {/ / get the full path of the current page

Var url=getCurrentPages () [getCurrentPages () .length-1]. _ _ route__

Url=url.replace (eapdomain/src/pages,..); / / replace the full path. Change the path to a relative path

Return url

}

Note: in the getCurrentUrl method, when url is finally returned, the replace method is called again. Because the url parameter of wx.redirectTo requires a relative path. So I changed it here.

Login.js

Var app=getApp ()

Page ({

Data: {

BackUrl:null

LoginName:null

PassWord:null

}

OnLoad:function (options) {

This.setData ({

BackUrl:null

});

/ / parameters brought by page initialization options for page jump

/ / console.log (options.backUrl)

This.setData ({

BackUrl:options.backUrl

});

}

InputClick:function (event) {

/ / assign paga.data dynamically

/ / id corresponds to the data item one by one

Var objId=event.currentTarget.id

Var paraObj= {}

ParaObj [objId] = event.detail.value

This.setData (paraObj)

/ / console.log (event.currentTarget.id)

/ / console.log (this.data)

}

OnReady:function () {

/ / Page rendering completed

}

OnShow:function () {

/ / Page display

}

OnHide:function () {

/ / Page hiding

}

OnUnload:function () {

/ / Page closes

}

LoginClick:function () {

Var loginName=this.data.loginName

Var passWord=this.data.passWord

If (loginNameNulls, passWordwords, nulls) {

Var backUrl=this.data.backUrl

/ / wx.redirectTo ({

/ / url:\ 'eapdomain/src/pages/pageCreate/pageCreate\'

/ /})

App.data.userInfo= {

LoginName:loginName

PassWord:passWord

}

Wx.redirectTo ({

Url: backUrl

});

/ / wx.redirectTo ({

/ the destination page address

/ / url:\ 'pages/logs/index\'

/ / success: function (res) {}

/ /})

} else {

This.setData ({

LoginName:null

PassWord:null

});

}

}

})

Here the inputClick event. Assign values to page.data data according to the foreground control id.

At this point, I believe that everyone on the "WeChat Mini Programs development login authentication how to achieve" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.