微信小程序登錄驗證實現
發布時間：2018-02-10 11:00 所屬欄目：小程序開發教程
需求描述：
對于部分頁面添加登錄驗證，用戶未登錄的情況下，進入頁面，頁面自動轉向登錄頁面。登錄驗證成功后，回調到登錄發起頁面。
實現思路：
創建全局變量用于存儲當前登錄用戶對象（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.wxml
<!--eapdomain/src/pages/login/login.wxml-->
<view>
<text>登錄頁面</text>
</view>
<view>
<text>用戶名</text>
<input type="text" placeholder="請輸入用戶名" bindinput="inputClick" id="loginName"></input>
</view>
<view>
<text>密碼</text>
<input type="password" placeholder="請輸入密碼" bindinput="inputClick" id="passWord"></input>
</view>
<view>
<button type="primary" catchtap="loginClick">登錄</button>
</view>
login.js
// eapdomain/src/pages/login/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數據進行賦值。
只為實現功能，UI設計還有待提高。還請見諒。
