React中Axios POST请求403错误：Access token异常问题求助

你的问题出在获取apiKey、access_token的异步流程和上传图片的请求没有同步——上传请求在新token存入localStorage之前就发出去了，导致用了旧的/无效的token；同时请求被连续调用两次，大概率是React组件重复触发渲染导致的。

1. 用async/await串行化认证流程 #

把获取apiKey和token的操作封装成异步函数，确保前一步完成后再执行下一步，彻底解决异步竞态问题：

// 封装完整的认证流程，确保apiKey和token都拿到手
async function doAuth() {
  try {
    // 第一步：拿apiKey
    const tenantResp = await axios.post('https://URL/tenants', {
      name: "user-name",
      password: "user-password"
    });
    const apiKey = tenantResp.data.apiKey;
    localStorage.setItem("api", apiKey); // 直接存字符串，不用JSON.stringify
    // 全局设置所有请求的apiKey，省得每次手动加
    axios.defaults.headers.common['X-API-KEY'] = apiKey;

    // 第二步：用apiKey拿access_token
    const loginResp = await axios.post('https://URL/login', {
      username: "user-name",
      password: "user-password"
    });
    const accessToken = loginResp.data.access_token;
    localStorage.setItem("access_token", accessToken);
    // 全局设置Authorization，后续请求自动带上
    axios.defaults.headers.common['Authorization'] = accessToken;
  } catch (err) {
    console.error('认证翻车了:', err);
  }
}

2. 让上传请求等认证完成再执行 #

在上传图片的函数里，先等认证流程跑完再发请求：

// 上传图片的函数
async function uploadImage(image) {
  // 先确保认证完成
  await doAuth();

  try {
    // 这里也可以直接用全局设置的headers，不用手动加
    const resp = await axios.post('URL/images', image);
    console.log('上传成了:', resp);
  } catch (err) {
    console.error('上传炸了:', err);
  }
}

3. 解决请求重复调用的问题 #

请求被调用两次，基本是React组件重复渲染导致的，你可以这么排查：

• 如果上传请求是在useEffect里触发的，检查依赖项数组是不是加错了，比如依赖了会频繁变化的变量；
• 用useRef加个标记，确保同一时间只发一次请求：

  const isUploading = useRef(false);
  async function handleUpload() {
    if (isUploading.current) return;
    isUploading.current = true;
    try {
      await uploadImage(image);
    } finally {
      isUploading.current = false;
    }
  }
  

• 检查组件是不是被重复挂载了，比如路由切换时的重复渲染。

4. 优化token的存储与读取 #

之前的代码里对apiKey的处理有点冗余（存的时候JSON.stringify，读的时候又replaceAll），直接存字符串就行，避免解析出错：

• 存：localStorage.setItem("api", res.data.apiKey)
• 读：const apiKey = localStorage.getItem("api")

可以给axios加个拦截器，自动处理token过期的情况：比如遇到403错误时，自动重新获取token，然后重试请求，不用每次都手动处理。

内容的提问来源于stack exchange，提问作者Jiří Hruška