小程序的登录鉴权是许多小程序必备的一个功能.
在鉴权方面,小程序是比较特殊的一种web应用。
在传统的前端项目中开发者是不能缓存账号密码的,在登录态过期后需要跳转到登录页让用户重新输入帐号密码来重新拿一个新的token。但是在小程序中不需要输入账号信息,通过和微信交互可以识别到用户是谁。
传统应用
1. 用户输入密码进行登录获取token
2. 缓存token
3. 访问其他页面
4. 下次进来调用当前页面接口不报错则继续让用户访问,接口返回token过期的错误信息则
5. 跳转到登录页面
一轮循环的情况
123,45123
小程序
1. 首次进入小程序,调用wx.login(异步)获取到code传给后端去和微信解析出用户信息(openid,unionid之类的),返回token
2. 缓存token
3. 下次进来先wx.checkSession检查登录态是否过期
4. 过期则返回走第一步,没过期则继续
5. 请求当前页面接口
6. 当前页面接口若返回token过期则返回走第一步
一轮循环的情况
125,12345,1234125,……(还有6的情况)
登录的场景,远比以前的情况多得多,所以需要人为的过滤一下。
优化后的小程序登录流程
1. 不管首次还是二次进入小程序都直接调用wx.login
—— 因为wx.checkSession本身也是异步,而且不能保证和后端设置的token过期时间都是一致的,不如在小程序冷启动的时候直接login刷新token。
2. 缓存token
3. 访问其他页面
4. 如果普通接口返回登录过期,则返回第一步
🌟 因为小程序不需要账号密码,wx.login就等同于传统的输入密码,而且这个过程前端是可以主动触发,保证了每次进来都是新鲜的token。
!!因为wx.login是异步,而且小程序app.js中生命周期中加入异步和页面page.js生命周期中的异步不能保证按循序拿到返回值,所以要对wx.login成功回调处进行封装,有两种思路:
1. 设置回调函数
2. 拦截页面生命周期,等待wx.login成功后再执行页面生命周期的代码
推荐第二种方式,不需要每个页面加太多代码,方便简洁