如何实现微信小程序用户无感知刷新token

雪山上的小灰熊

已于 2023-06-27 11:31:41 修改

阅读量894

点赞数 1

文章标签： javascript 微信小程序

于 2023-06-16 10:28:34 首次发布

本文链接：https://blog.csdn.net/u012885136/article/details/131241692

版权

当用户的Token即将过期时，该代码示例展示了如何在不中断用户体验的情况下，通过前端自动发送请求到服务器刷新JWTToken。过程包括检测403错误码，触发_token_刷新函数，使用wx.login获取新Token并存储，然后重新发送请求。

摘要由CSDN通过智能技术生成

场景描述：

用户在使用过程中可能存在token过期的问题，这个时候需要前端在不影响用户感知的情况下去刷新token

具体代码实现如下

import {
    config
} from './config.js'

import {
    Base64
} from './base64.js'

import {
    Token
} from '../models/token.js'

class HTTP {
    request({url, data = {}, method = 'GET'}) {
        return new Promise((resolve, reject) => {
            this._request(url, resolve, reject, data, method);
        }).catch((e) => {
            wx.showToast({
                title: '抱歉，出现了一个错误', 
                icon:'none',
                duration:2000
            })
        });
    }

    // 2小时
    // token1 1小时59分59秒 超过2小时
    // 退出 
    // 自动 无感知帮助他重新刷新令牌
    // 退出 短时间 二次重发机制
    _request(url, resolve, reject, data = {}, method = 'GET', noRefetch = false) {
        let openId = wx.getStorageSync('openid');
        wx.request({
            url: config.api_base_api + url,
            method: method,
            data: data,
            header: {
                'content-type': 'application/json',
                'openId': openId,
                'uuid': config.uuid,
                Authorization: this._encode()
            },
            success: (res) => {
                const code = res.statusCode.toString();
                if (code.startsWith('2')) {
                    resolve(res.data)
                } else {
                    if (code == '403') {
                        if (!noRefetch) {
                            this._refetch(
                                url,
                                resolve,
                                reject,
                                data,
                                method
                            )
                        }
                    } else {
                        reject();
                        // 处理报错
                    }
                }
            },
            fail: (err) => {
                reject();
                // 处理报错
            }
        })
    }

    _encode() {
        const token = wx.getStorageSync('token')
        const base64 = new Base64()
        const result = base64.encode(token + ':')
        return 'Basic ' + result
    }


    _refetch(...param) {
        var token = new Token();
        token.getTokenFromServer((token) => {
          this._request(...param, true);
        });
      }

}

export {
    HTTP
}

token.js代码如下

import {
    config
} from '../utils/config'

class Token {
    constructor() {
        this.tokenUrl = config.api_base_api + 'system/token/wxLogin'
    } 
    
    getTokenFromServer(callBack) {
        var that = this;
        wx.login({
            success: function(res) {
                wx.request({
                    url: that.tokenUrl,
                    header: {
                        'content-type': 'application/json'
                    },
                    method: 'POST',
                    data: {
                        code: res.code
                    },
                    success: (result)=>{
                        wx.setStorageSync('token', result.data.token);
                        wx.setStorageSync('openId', result.data.openId);
                        callBack && callBack(result.data); 
                    }
                });
            }
        })
    }
}

export {
    Token
}