发表日期:2019-11 文章编辑:小灯 浏览次数:10191
登录和获取用户信息是小程序中最基本的两步操作,但是由于之前小程序官方开始时的设计缺陷,导致很多开发者将登录和获取用户信息绑定使用,尽管后来小程序wx.getUserInfo接口调整为:在用户未授权过的情况下调用此接口,将不再出现授权弹窗,会直接进入 fail回调,但是改了之后,依旧有不少开发者对这两步的概念混淆不清,接下来这篇文章将会详细介绍小程序这两步操作
wx.login()用来做登录的方法,调用接口获取登录凭证,code发送给后端用于置换session_key和openid等数据,接下来看看小程序的整个登录流程是怎样的:
这是小程序官方的一张登录流程图,现在就来解读一下这个流程
同时满足以上两个条件就能拿到用户unionid,这样一来,就能在wx.login()准确识别出用户是谁
以上就是小程序的整个登录流程,可以看到其实并不是一定要wx.getUserInfo()才能拿到用户的信息,在特定的条件下,通过wx.login()的调用拿到unionId也能后端数据库里拿到用户信息
wx.getUserInfo()以前调用时是会弹出授权弹框的,根据用户的授权与否进入对应的回调函数,但是后来微信发现开发者滥用wx.getUserInfo()方法,不授权用户信息不能使用小程序,现在就只能通过button组件open-type="getUserInfo"触发授权弹窗,授权后能获得用户信息以及用户信息的加密数据,将用户信息的加密数据发送到后端,后端通过wx.login()的code置换到的session_key对加密数据进行解密就能拿到用户的完整信息,这一步其实是对第一步的补充,当wx.login()无法确认用户的时候时候才会执行到这一步,如果在wx.login()可以确认用户信息时,就可以不用执行这一步,实现用户的无感登录。
注意点:根据小程序官方最近发布的文档来看,小程序不能用户进入小程序时就弹登录框要求用户登录才能体验小程序,这种操作审核会被拒,要用户在体验一定的小程序功能后,才能引导用户去登录授权用户信息,具体文档地址
以往我们写网页应用时,当后端下发的token失效时,请求接口会得到403错误码,然后前端接到返回的错误码时就会跳到登录页要求用户重新登录,但是在小程序当token失效时,需要跳到一个登录页重新登录吗?明显不需要,因为小程序本身就没有账号密码登录,因此登录失效了直接做一个无感的重登操作就行了,除非某些小程序在并没有依赖微信的登录信息,而是小程序里面内置自己的用户登录信息,这时候就需要跳到一个登录页面进行重登,但是这样的小程序还是少数,接下来就来看看如何小程序是如何做无感重登的。
直接来看代码:
const Fly = require('../libs/flyio')
const fly = new Fly()
const newFly = new Fly()
let time = 0
let baseUrl = 'xxxxx'
fly.interceptors.request.use((request) => {
wx.showNavigationBarLoading()
request.headers['token'] = wx.getStorageSync('token')
request.baseURL = baseUrl
return request
})
newFly.interceptors.request.use((request) => {
wx.showNavigationBarLoading()
request.headers['token'] = wx.getStorageSync('token')
request.baseURL = baseUrl
return request
})
fly.interceptors.response.use(
(response, promise) => {
wx.hideNavigationBarLoading()
return promise.resolve(response.data)
},
function (err, promise) {
wx.hideNavigationBarLoading()
// session或者session_key失效的时候重新登录
if (err.status === 403) {
//锁定当前实例,后续请求会在拦截器外排队
this.lock()
// 当出现未认证的情况时重新登录,超过三次抛出错误
if (time > 3) {
time = 0
return promise.reject(err.message + `(${err.status})`)
}
return new Promise((resolve, reject) => {
wx.login({
success: (e) => {
let options = {
'code': e.code
}
resolve(options)
}
})
}).then((options) => {
return newFly.post('/login', options).then(info => {
wx.setStorageSync('token', info.token)
time++
//解锁后,会继续发起请求队列中的任务
this.unlock()
// 重新请求失败的请求
return fly.request(err.request)
})
})
}
}
)
export {
fly
}
上面的代码展示的就是小程序token过期重登的过程,代码不多,关键的地方也加上了注释,很容易理解,这里面最关键的就是使用了flyio这个网络请求库,利用这个库做的过期重登,这是一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库,可以使用一份http请求代码在浏览器、微信小程序、Weex、Node、React Native、快应用中都能正常运行,在小程序中使用这个库十分方便。这段代码为了避免死循环,因此用了一个计数,超过三次就不会再重试登录,直接抛错
本篇文章主要介绍了小程序的登录流程、获取用户信息、以及登录过期重登的相关内容,这里介绍的只是基础的通用的流程,实际上每个小程序的业务可能不太一样,因此在具体应用需要根据具体业务再行调整。
如果有错误或不严谨的地方,欢迎批评指正,如果喜欢,欢迎点赞
日期:2019-11 浏览次数:5421
日期:2019-11 浏览次数:11883
日期:2019-11 浏览次数:4259
日期:2019-11 浏览次数:5284
日期:2019-11 浏览次数:5200
日期:2019-11 浏览次数:7072
日期:2019-11 浏览次数:5103
日期:2019-11 浏览次数:15667
日期:2019-11 浏览次数:4623
日期:2019-11 浏览次数:6416
日期:2019-11 浏览次数:5255
日期:2019-11 浏览次数:4476
日期:2019-11 浏览次数:10638
日期:2019-11 浏览次数:8227
日期:2019-11 浏览次数:4986
日期:2019-11 浏览次数:4222
日期:2019-11 浏览次数:8851
日期:2019-11 浏览次数:4568
日期:2019-11 浏览次数:4751
日期:2019-11 浏览次数:4780
日期:2019-11 浏览次数:4385
日期:2019-11 浏览次数:4945
日期:2019-11 浏览次数:10190
日期:2019-11 浏览次数:5359
日期:2019-11 浏览次数:5312
日期:2019-11 浏览次数:4801
日期:2019-11 浏览次数:12210
日期:2019-11 浏览次数:7260
日期:2019-11 浏览次数:7806
日期:2019-11 浏览次数:4791
Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.