小程序登录流程解析

目录

1、小程序的登录流程

2、小程序登录代码解析


1、小程序的登录流程

小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。官方文档

小程序的登录流程解析:(1)调用 wx.login() 获取 临时登录凭证 code。(2)通过 wx.request() 发送 code 到开发者服务器,开发者服务器会将 code 和 小程序的 appi + appscret 一并发送给微信服务器 ,此时会返回给开发者服务器一个登录态的唯一标识 openid。(3)开发者服务器在拿到 openid 后,第一时间是将 openid 和 用户名密码 信息绑定在一起并存起来,然后返回自定义登录的状态(一般是一个 token 令牌)给小程序。(4) 小程序客户端将这个 token 保存起来,一般会保存到 storage 里。

这样该小程序下一次被打开时,只需要将保存的 token 令牌发送给服务器,服务器会首先验证 token 是否过期,如果没有国企的话服务器会根据 token 令牌去查询相关的账号信息,并将这些信息返回给小程序,做一个前端的页面展示。如果 token 过期的话,则需要重新进行上述的登录步骤。

2、小程序登录代码解析

小程序的登录功能代码通常在 app.js 文件中编写:

// app.js
App({
    globalData:{    //比如在home.js中,可以通过:const app = getApp(); app.globalData.token拿到这个token
        token:'';   //问题:token放在对象中,对象是放在内存里的,一旦小程序被关闭,内存会被回收,那下次用户进入还需登录
    },
    //当小程序初始化完成时,会触发onLauch(全局只触发一次)
    onLauch:function(){
        //1.先从缓存storage中取出token
        const token = wx.getStorageSync('token')
        //2.判断token是否有值
        if(token && token.length !== 0){    //有token,验证token是否过期
            this.check_token(token);
        }else {    //没有token,进行登录操作
            this.login();
        }
    },
    check_token(token){    //验证token是否过期
        wx.request({
            url:'http://172.16.1.38:8081/auth',  //项目设置不校验合法域名、服务器代码需要联合后端人员开发
            methods:'post',
            header:{ token:token },
            success:function(res){
                if(res.data.errCode != undefined){    //token没有过期
                    this.globalData.token = token;
                }else{    //token过期了
                    this.login();
                }
            },
            fail:function(err){ console.log(err); }
        })
    },
    login(){    //登录操作
        wx.login({
            success:(res) => {
                console.log(res);       //res中会有一个code,它只有五分钟的有效期
                const code = res.code;  //1.获取code,并将其保存下来

                wx.request({            //2.将code发送给开发者自己的服务器
                    url:'http://172.16.1.38:8081/login',  //项目设置不校验合法域名、服务器代码需要联合后端人员开发
                    method:'post',
                    data:{             //发送网络请求时传递的参数,有时候还会传递用户名和密码
                        code:code;
                    },
                    success: (res) => {    //服务器会发返回一个自定义登录态,类似token的东西
                        //1.取出token
                        const token = res.data.token;
                        //2.将token保存到globalData中
                        this.globalData.token = token;    //只有箭头函数的情况下,this指向才正确
                        //3.将token进行本地存储,防止用户下次进入还需要登录
                        wx.setStorageSync('token',token)    //该方法是同步的,setStorage()方法是移步的
                    }
                })
            }
        })
    }
})

发布了188 篇原创文章 · 获赞 13 · 访问量 7226

猜你喜欢

转载自blog.csdn.net/Marker__/article/details/104157681