在动作创建者中的 Axios 请求之后调用 Redux 中间件刷新令牌

Question

如果令牌过期，我正在创建一个 redux 中间件来在任何请求之前刷新令牌。
问题是在第一次调用后我总是得到 error 400 bad request，但是如果再调用一次（这是一个分页请求）它工作正常，因为令牌被刷新了。
我注意到 Axios 请求在新令牌进入之前和设置新 Axios 授权之前被触发 header，所以我尝试制作中间件 async-await，但仍然没有运气......

import {
    getJWT,
    isTokenExpired
} from "../util/helpers";
import Cookies from "js-cookie";
import axios from "axios";

const refreshTokenMiddleware = store => next => async action => {
    if (!action.excludeFromRefresh) {
        const token = getJWT();
        if (token && isTokenExpired()) {
            try {
                const { data } = await axios.post("auth/refresh");
                axios.defaults.headers.common[
                    "Authorization"
                ] = `Bearer ${data.data.access_token}`;
                Cookies.set("AppToken", data.data.access_token);
                next(action);
            } catch (error) {
                console.log(error);
            }

        } else {
            next(action);
        }
    } else {
        next(action);
    }
};

export default refreshTokenMiddleware;

我也怀疑第一次用旧的Token调用axios请求
我在这里做错了什么？

=====================

编辑

我试图一起抛弃中间件并实现 axios 拦截器，因为中间件无法捕获 axios 请求...

axios.interceptors.request.use(
    function(config) {
        // Do something before request is sent
        if (
            config.url !== "auth/refresh" &&
            config.url !== "auth/login" &&
            config.url !== "auth/register"
        ) {
            const token = getJWT();

            if (token && isTokenExpired()) {
                axios.post("auth/refresh").then(res => {
                    config.headers.Authorization = `Bearer ${res.data.data.access_token}`;
                    console.log(
                        "Inside the refresh in interceptor",
                        res.data.data.access_token
                    );
                    return config;
                });
            }
        }
        return config;
    },
    function(error) {
        // Do something with request error
        return Promise.reject(error);
    }
);

但这似乎也行不通，第一次使用授权 header 中的旧令牌触发请求。

我能做什么？

Answer 1

乍一看，这个 if 语句有点错误，因为你试图检查 url 是否同时具有三个不同的值，我认为你应该在这里使用 || 运算符。

Answer 2

对于可能遇到此 post 感兴趣的任何人，我设法使用此 Axios interceptor 解决了我的问题 ... https://gist.github.com/Godofbrowser/bf118322301af3fc334437c683887c5f

在动作创建者中的 Axios 请求之后调用 Redux 中间件刷新令牌

Redux middleware refresh token gets called after Axios request in the action creator

middleware

reactjs

redux

axios

redux-middleware

编辑