Javascript 在刷新页面之前，我在Cookie中设置了标记axios获取标记未定义

发布于12月07日

下面是我的axios文件

import axios from "axios";
import Cookies from "js-cookie";

const token = Cookies.get("token");

const api = axios.create({
  baseURL: process.env.REACT_APP_API_URL, // Replace with your API base URL
  timeout: 10000, // Optional: Set a timeout for requests
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Content-Type": "application/json",
    ...(token && { "x-access-token": token }),
  },
});

export default api;

当我登录时，我在Cookie中设置了token.token设置，但AXIOS直到我刷新页面才能获得它.在页面上刷新AXIOS重新呈现，因此AXIOS从cookie中获得token.

推荐答案

在加载代码时创建api实例时，您只能从Cookie中读取一次令牌值.

发出请求时，使用request interceptor读取并注入当前令牌值.

示例:

import axios from "axios";
import Cookies from "js-cookie";

const axiosInstance = axios.create({
  baseURL: process.env.REACT_APP_API_URL, // Replace with your API base URL
  timeout: 10000, // Optional: Set a timeout for requests
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Content-Type": "application/json",
  },
});

axiosInstance.interceptors.request.use(config => {
  const token = Cookies.get("token");

  if (token) {
    config.headers["x-access-token"] = token;
  }

  return config;
});

export default axiosInstance;