本篇文章介紹了微信小程式開發登入驗證功能的方法,希望對學習小程式開發的朋友有幫助!
微信小程式開發登入驗證功能
需求描述:
對於部分頁面添加登入驗證,使用者未登入的情況下,進入頁面,頁面自動轉向登入頁面。登入驗證成功後,回調到登入發起頁面。
推薦學習:小程式開發
實作想法:
建立全域變數用於儲存目前登入使用者物件(userInfo)、全域方法用於驗證登入有效性(checkLoginInfo())、全域方法用於取得目前頁面的全路徑(getCurrentUrl())。
針對需要新增登入限制的頁面page.onLoad事件,呼叫checkLoginInfo()方法,判斷目前登入狀態。如未登錄,頁面轉向登入頁面。
登入驗證通過後,將登入資訊儲存到全域變數userInfo,跳回登入啟動頁面。
關鍵程式碼及注意事項:
app.js
data:{ userInfo:null,//用户登录存储对象 loginUrl:../login/login, }, checkLoginInfo:function(url){//验证登录状态 if(this.data.userInfo==null){ return url; }else{ return ; } }, getCurrentUrl:function(){//获取当前页面全路径 var url=getCurrentPages()[getCurrentPages().length-1].__route__; url=url.replace(eapdomain/src/pages,..);//替换路径全路径。修改该路径为相对路径 return url; }
注意:在getCurrentUrl方法中,最後傳回url時,又呼叫了replace方法。因為wx.redirectTo的url參數要求為相對路徑。所以在這裡轉換了一下。
login.js
var app=getApp(); Page({ data:{ backUrl:null, loginName:null, passWord:null }, onLoad:function(options){ this.setData({ backUrl:null }); // 页面初始化 options为页面跳转所带来的参数 //console.log(options.backUrl); this.setData({ backUrl:options.backUrl }); }, inputClick:function(event){ //动态 对 paga.data 进行赋值 //id与 数据项 一一对应 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(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 }, loginClick:function(){ var loginName=this.data.loginName; var passWord=this.data.passWord; if(loginName!=null&&passWord!=null){ 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({ // //目的页面地址 // url: \'pages/logs/index\', // success: function(res){}, // }) }else{ this.setData({ loginName:null, passWord:null }); } } })
這裡inputClick事件。依前台控制項id為page.data資料賦值。
PHP中文網,大量thinkphp教學,歡迎學習!
以上是微信小程式開發登入驗證功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!