小程序官方给出的小程序登录流程:
点击进入小程序登录官方文档
本文所提到的token对应官方说的自定义登录态,token一般都是有时效性,按照此流程,当token失效的时候,页面在请求接口的时候服务端肯定会认为token是非法的,此时就需要小程序端重新获取新的token,然后继续接着后面的流程走。一般服务端都会给一个特定的状态码标记需要重新获取token,后面的场景我们都以服务端返回code码401认为需要去登录。
场景1:token失效之后直接跳转到特定的一个授权登录页面
由于getUserInfo接口变动的缘故,必须用户手动去触发一个按钮,一般都会做一个特定的授权登录页面或者弹窗,那此时在接口返回401的时候那我们直接就跳转到那个授权页面或者弹起授权登录弹窗即可,相当于是走了用户第一次进入该小程序的流程。
这种方案是最简单的解决方案,但是缺点也很明显:打断了用户的操作流程,重复了第一次授权登录的流程,很繁琐。
场景2:token失效之后无感知获取新token并继续之前的操作
分2步来解决这个问题,无感知获取token
这个其实很简单,调wx.login()获取code之后再调服务端新的接口,此接口只需要接受code返回当前登录账户最新的信息(token以及其他),拿到最新token。
具体代码实现如下:
config/request.js
import base from '@/config/baseUrl'
const baseUrl = base.baseUrl
// 不需要显示loading的接口
const whiteList = [
'/wechat/user/file/list',
'/wechat/user/file/uploadFile/',
'/wechat/user/file/handlerFile/',
]
let flag = false
// 全局请求封装
function request(url, method, params, callback = '') {
const token = uni.getStorageSync('user_token')
whiteList.forEach(item => {
if(url.indexOf(item) > -1){
// 不需要loading
flag = true
}
})
if(whiteList.indexOf(url)>-1 || flag) {
// 不需要显示loading
} else {
uni.showLoading({
title: '加载中' })
}
if(!token ){
// 执行没有登录的逻辑
uni.hideLoading()
// 如果没有登录权限就停止往下执行
// return
}
return new Promise((resolve, reject) => {
wx.request({
url: baseUrl + url,
method: method,
header: {
'Authorization': 'Bearer ' + token },
data: params,
success:res => {
if (callback){
return callback(res.data)
}
if (res.data.code === 401) {
console.log('401执行removeStorageSync')
getNewToken().then(() => {
request