Redux 中间件刷新令牌在操作创建器中的 Axios 请求后调用

Question

如果令牌过期，我正在创建一个 redux 中间件，以便在任何请求之前刷新令牌。
问题是在第一次调用后我总是得到error 400 bad request，但是如果进行了另一次调用(这是一个分页要求(，它工作正常，因为令牌已刷新。
我注意到 Axios 请求在新令牌进入之前和设置新的 Axios 授权标头之前被触发，所以我试图让中间件异步等待，但仍然没有运气......

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;

我还怀疑 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);
}
);

但这似乎也不起作用，请求在第一次使用授权标头中的旧令牌触发。

我能做什么？

Answer 1

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

Answer 2

乍一看，这个if语句在某种程度上是错误的，因为您尝试同时检查 url 是否具有三个不同的值，我认为您应该在此处使用||运算符。