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

 所属分类:php教程

 浏览:108次-  评论: 0次-  更新时间:2022-10-08
描述:更多教程资料进入php教程获得。 本篇文章介绍了微信小程序开发登录验证功能的方法,希望对学习小程序开发的朋友有帮助!程序员必备接口测试...
更多教程资料进入php教程获得。 本篇文章介绍了微信小程序开发登录验证功能的方法,希望对学习小程序开发的朋友有帮助!

程序员必备接口测试调试工具:立即使用
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教程,欢迎学习!

以上就是微信小程序开发登录验证功能的详细内容,更多请关注zzsucai.com其它相关文章!

积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!