微信小程序开发登录验证功能（小程序登录验证授权过程）

微信小程序开发登录验证功能（小程序登录验证授权过程）

本篇文章介绍了微信小程序开发登录验证功能的方法，希望对学习小程序开发的朋友有帮助！

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

微信小程序开发登录验证功能

需求描述：

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

推荐学习：小程序开发

实现思路：

创建全局变量用于存储当前登录用户对象（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教程，欢迎学习！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。