微信小程序开发中登录验证功能的实现要点

why 251 2024-07-23

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

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

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

需求描述:

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

实现思路:

创建全局变量用于存储当前登录用户对象(userInfo)、全局方法用于验证登录有效性(checkLoginInfo())、全局方法用于获取当前页面的全路径(getCurrentUrl())。

针对需要添加登录限制的页面page.onLoad事件,调用checkLoginInfo()方法,判断当前登录状态。如未登录,页面转向登录页面。

登录验证通过后,将登录信息存储到全局变量userInfo,跳转回登录发起页面。

关键代码及注意事项:

app.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

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数据进行赋值。


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

上一篇:小程序个人版开通支付功能的可能性分析
下一篇:关于小程序名字能否重复的深入探究
相关文章

 发表评论

暂时没有评论,来抢沙发吧~