uni-app开发小程序,当token过期后重新获取token如何继续请求之前的接口

InMyLife
  • 22
// 全局请求路径,也就是后端的请求基准路径
import {
    development
} from './networkUrl.js'
import cache from './cache.js'
import store from '@/store'
const FormData = require('./formData.js')
// 同时发送异步代码的次数,防止一次点击中有多次请求,用于处理

let baseUrl = development
// 不需要登录的接口
const noToken = [
    '/wxxcx/login', // 登录
    '/oauth/token' // 授权
];

// 封装请求方法,并向外暴露该方法
export const request = (options) => {
    // 解构请求头参数
    let header = {
        ...options.header
    };

    // 当前请求不是登录时请求,在header中加上后端返回的token
    // 判断是否需要登录
    if (!(noToken.indexOf(options.url) >= 0)) {
        let userToken = cache.get('litecToken')
        if (!userToken) {
            uni.reLaunchTo({
                url: '/pages/login/login'
            })
        } else {
            // 将 token 放入请求头中
            header["Authorization"] = userToken;
        }
    }

    // 如果调用接口不明确不显示 loading
    if (!options.hideLoading) {
        // 显示加载中 效果
        uni.showLoading({
            title: "加载中",
            mask: true,
        });
    }
    return new Promise((resolve, reject) => {
        uni.request({
            url: baseUrl + options.url,
            method: options.method || 'POST',
            data: options.data || {},
            header,
            callback: '',
            success: (res) => {
                if (!options.hideLoading) {
                    uni.hideLoading();
                }
                const result = res.data
                if (result.status == 401) {
                    let formData = new FormData()
                    formData.append("client_id", cache.get('openId'))
                    formData.append("client_secret", "")
                    formData.append("grant_type", "client_credentials")
                    let data = formData.getData()
                    uni.request({
                        url: 'http://192.168.2.127:7000/oauth/token',
                        method: 'POST',
                        header: {
                            'content-type': data.contentType
                        },
                        data: data.buffer,
                        success: (res) => {
                            store.commit('LOGIN', {
                                token: res.access_token,
                                time: res.expires_in
                            })
                        }
                    })
                } else {
                    resolve(result)
                }
            },
            fail: (err) => {
                console.log(err)
                if (!options.hideLoading) {
                    uni.hideLoading();
                }
                if (error && error.response) {
                    showError(error.response);
                }
                reject(err)
            },
            // 完成之后关闭加载效果
            complete: () => {
                if (!options.hideLoading) {
                    uni.hideLoading();
                }
            }
        })
    })
}

上面是请求和判断401代码,当接口返回401后需要重新授权获取新的token,在我获得新的token后如何在不让用户知道的情况下继续之前的逻辑,通俗的说就是重新自动请求刚才401的接口

回复
阅读 384
2 个回答

斗胆回答:由于http的无状态特点,使用token的目的在于向服务端确认客户端的身份。换句话,带有不同token请求头的请求,服务端会认为这是两个不同的客户端访问请求。
那么你只需要将服务端返回的新token保存到客户端覆盖掉过期的token,cookie localstorage sessionstorage都可以。这样下次请求请求头带的就是没过期新的token

需要记录401的接口,重新获取token后需要重新发送请求

https://github.com/one-pupil/vue-template/blob/master/src/utils/http.js
你知道吗?

宣传栏