reactjs - 防止 axios 在已经请求刷新令牌请求时发送它

Question

我有一个 axios 拦截器，它在原始请求收到 401 错误时发送刷新访问令牌的请求，但问题是即使它在发送另一个请求并获得 401 时请求刷新令牌，它再次发送刷新令牌请求！当已经有一个刷新令牌请求挂起时，它会继续发送刷新访问令牌的请求。我怎样才能防止这种情况？

const createResponseInterceptor = () => {
const interceptor = axiosClient.interceptors.response.use(
    (response) => {
        return response;
    },
    (error: AxiosError) => {
        const originalRequest = error.config;
        if (error.response && error.response.status !== 401) {
            return Promise.reject(error);
        }

        axiosClient.interceptors.response.eject(interceptor);

        console.info('token expired', error.response?.config);

        return axiosClient
            .patch('/auth', {
                refreshToken: localStorage.getItem('refresh_token'),
            })
            .then((res) => {
                if (res.status === 200) {
                    localStorage.setItem(
                        'access_token',
                        res.data.accessToken
                    );

                    axiosClient.defaults.headers['Authorization'] =
                        res.data.accessToken;
                    originalRequest.headers['Authorization'] =
                        res.data.accessToken;

                    return axiosClient(originalRequest);
                }
            })
            .catch((err) => {
                if (err.response && err.response.status === 401) {
                    localStorage.removeItem('access_token');
                    localStorage.removeItem('refresh_token');

                    window.location.href = '/login';

                    return Promise.reject(err);
                } else {
                    console.info('error failed');
                    axiosClient.interceptors.response.eject(interceptor);

                    return Promise.reject(err);
                }
            })
            .finally(createResponseInterceptor);
    }
);

};

这是我的拦截器代码，它工作得很好，但我只有一个问题。

标签： reactjsaxios