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

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

实现思路：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!