如何在axios中刷新token？

Question

我的问题与customAxios.interceptors.response.use. 我来这里的目的是；如果令牌过期并且出现 401 错误，请在出现 401 错误时再次发出请求，并将新令牌写入标头。另一方面，如果我收到除 401 错误之外的错误，请显示error.response.data. 你认为这个逻辑设置正确吗？我尝试测试，但我不确定，尤其是 401 错误情况

import axios from "axios";
import { LoginAPI } from "../playwright/tests/login/login.api";
import { test } from "@playwright/test"
import {configEnv} from "../config/config"

test.beforeAll(async () => {
    await LoginAPI.API.Signin.run()
});
const customAxios = axios.create({
    baseURL: configEnv.apiBaseURL
});

customAxios.interceptors.request.use(
    async (config) => {
        if (config.headers) {
            config.headers['Authorization'] = `Bearer ${LoginAPI.States.token}`;
            return config;
        }
        return config;
    },
    (error) => {
        Promise.reject(error);
    }
);

customAxios.interceptors.response.use(
    function(response) {
      return response;
    },
   async function(error) {
      if (401 === error.response.status) {
        await LoginAPI.API.Signin.run()
        customAxios.defaults.headers.common['Authorization'] = `Bearer ${LoginAPI.States.token}`
      } else {
        return Promise.reject(error.response.data);
      }
    }
  );

export default customAxios

Answer 1

我建议您将令牌存储在 localStorage 中，然后在刷新后替换它。通过这种方式，您可以在 API 类中的一个位置设置令牌。

import axios from "axios";

export const ApiClient = () => {
    // Create a new axios instance
    const api = axios.create({
        baseURL: "URL",
        headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
        },
    });

    // Add a request interceptor to add the JWT token to the authorization header
    api.interceptors.request.use(
        (config) => {
            const token = sessionStorage.getItem("jwtToken");
            if (token) {
                config.headers.Authorization = `Bearer ${token}`;
            }
            return config;
        },
        (error) => Promise.reject(error)
    );

    // Add a response interceptor to refresh the JWT token if it's expired
    api.interceptors.response.use(
        (response) => response,
        (error) => {
            const originalRequest = error.config;

            // If the error is a 401 and we have a refresh token, refresh the JWT token
            if (
                error.response.status === 401 &&
                sessionStorage.getItem("refreshToken")
            ) {
                const refreshToken = sessionStorage.getItem("refreshToken");

                let data = JSON.stringify({
                    refresh_token: refreshToken,
                });

                post("/refreshToken", data)
                    .then((response) => {
                        sessionStorage.setItem("jwtToken", response.token);
                        sessionStorage.setItem("refreshToken", response.refresh_token);

                        // Re-run the original request that was intercepted
                        originalRequest.headers.Authorization = `Bearer ${response.token}`;
                        api(originalRequest)
                            .then((response) => {
                                return response.data;
                            })
                            .catch((error) => {
                                console.log(error);
                            });
                        // return api(originalRequest)
                    })
                    .catch((err) => {
                        // If there is an error refreshing the token, log out the user
                        console.log(err);
                    });
            }

            // Return the original error if we can't handle it
            return Promise.reject(error);
        }
    );

    const login = (email, password) => {
        return api
            .post("/authentication_token", { email, password })
            .then(({ data }) => {
                // Store the JWT and refresh tokens in session storage
                sessionStorage.setItem("jwtToken", data.token);
                sessionStorage.setItem("refreshToken", data.refresh_token);
            })
            .catch((err) => {
                // Return the error if the request fails
                return err;
            });
    };


    const get = (path) => {
        return api.get(path).then((response) => response.data);
    };

    const post = (path, data) => {
        return api.post(path, data).then((response) => response.data);
    };

    const put = (path, data) => {
        return api.put(path, data).then((response) => response.data);
    };

    const del = (path) => {
        return api.delete(path).then((response) => response);
    };



    return {
        login,
        get,
        post,
        put,
        del,
    };
};

最好的，克里斯