当前位置: 首页 > 微信相关

微信小程序开发登录验证实现教程

发布日期:2020-08-12 09:09:31 分类:微信相关 阅读()来源:网络收集

好东西要多分享:

做网站就上魔艺客
摘要:对于部分页面添加登录验证,用户未登录的情况下,进入页面,页面自动转向登录页面。登录验证成功后,回

需求描述:

对于部分页面添加登录验证,用户未登录的情况下,进入页面,页面自动转向登录页面。登录验证成功后,回调到登录发起页面。

实现思路:

创建全局变量用于存储当前登录用户对象(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数据进行赋值。


推荐阅读: 微信小程序开发教程 微信小程序

声明: 文章内容及图片部分全部摘自网络,在此分享供读者参考和借鉴,不代表酷雷的观点。文章、图片等内容如涉嫌侵权,请联系我们删除,谢谢!带有原创标签的属于酷雷原创文章,未经允许不得转载!

标签:

我要说一说

加载中~

相关推荐

您好,很高兴为您服务!
广告合作
投诉建议
联系站长

客服热线:15821432298

扫码加好友,优惠等你来!