“Axios”在令牌刷新后不再请求 - 原生反应

Question

我正在使用 axios 和 React Native

我使用 accessToken 发送请求来创建配置文件。

所以我制作了 axiosInstace 并放置了“授权”（accessToken）。

问题是，token刷新后axios请求失败。

-> 在accessToken过期之前，axios运行良好。

但是，当 accessToken 过期时，错误会出现状态代码 401，因此我的代码会重新发出 accessToken。 尽管如此，重新发行 accessToken 仍然有效！！

但是，重新发放accessToken后，发送新的请求不起作用。

我不确定为什么它不起作用。

你能帮我吗？

import axios from 'axios';
import EncryptedStorage from 'react-native-encrypted-storage';

const baseURL = '-';
const axiosInstance = axios.create({ baseURL });

let _refreshingPromise = null;

const reissueToken = async () => {
    try {
        const refreshToken = await EncryptedStorage.getItem('refreshToken');

        if (!refreshToken) {
            throw new Error("refreshToken doesnt exist");
        }

        const response = await axios.post(`${baseURL}/auth/renew`, { refreshToken });

        const newAccessToken = response.data.accessToken;
        await EncryptedStorage.setItem('accessToken', newAccessToken);

        return newAccessToken;
    } catch (error) {
        console.error("reissue failed ", error);
        throw error;
    }
};

axiosInstance.interceptors.request.use(
    async (config) => {
        try {
            const accessToken = await EncryptedStorage.getItem('accessToken');
            config.headers['Content-Type'] = 'application/json';
            config.headers['Authorization'] = accessToken;

            console.log("original requests config:", config);
            return config;
        } catch (error) {
            console.error("request interceptor failed:", error);
            return Promise.reject(error);
        }
    },
    (error) => {
        console.error("request interceptor error :", error);
        return Promise.reject(error);
    }
);


axiosInstance.interceptors.response.use(
    (response) => {
        console.log("request succeed!");
        return response;
    },
    async (error) => {
        const { config,response } = error;
        const status = response? response.status : null;

    
        console.log("response status code : ", status);
        if(status === 502) {
            console.log("502 error");
            
        }
        if (status === 401) {
            console.log("start!");
            if (!_refreshingPromise) {
                console.log(_refreshingPromise);
                _refreshingPromise = new Promise((resolve, reject) => {
                    reissueToken()
                        .then((newAccessToken) => {
                            console.log("newToken : ", newAccessToken);
                            config.headers['Authorization'] = newAccessToken;
                            console.log(config.headers.Authorization);

                            axios(config)
                            .then((response) => {
                                
                                console.log("response:", response.data);
                                resolve(response); 
                            })
                            .catch((error) => {
                                console.log("request failed!");
                                reject(error); 
                            })
                            .finally(() => {
                                _refreshingPromise = null;
                            });
                        })
                        .catch((reissueError) => {
                            reject(new Error('error', reissueError));
                        })
                        .finally(() => {
                            _refreshingPromise = null;
                        });
                });
            }

            return _refreshingPromise;
        }

        return Promise.reject(error);
    }
);

export default axiosInstance;

1. 我尝试更改 axios 版本。 - 现在是 v1.6.8

2. 做出了新的承诺，只有 1 个请求。

Answer 1

试试这个

axios.request(error.config)

我正在使用axios

0.21.1

axios.interceptors.response.use(
(response) => response,
async function(error) {
    if (401 === error?.response?.status) {
        const accessToken = await reissueToken();
        if (accessToken) {
            error.config.headers["Authorization"] = `Bearer ${accessToken}`;
            return axios.request(error.config);
        }
    }
});