问题描述

如果令牌过期，我正在创建一个 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 请求是第一次使用旧 Token 调用的。
我在这里做错了什么？

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

编辑

我试图放弃所有中间件并实现 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);
    }
);

但这似乎也不起作用，请求第一次在 Authorization 标头中使用旧 Token 触发。

我能做些什么？

标签： reactjsreduxaxiosmiddlewareredux-middleware

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

问题描述

编辑

解决方案

推荐阅读