如何将Context API获取的Bearer Token传入useEffect中的Axios请求？

你的代码存在几个关键问题，导致Token未正确传递引发401未授权错误，以下是具体修正方案：

1. 修正Axios请求的headers字段拼写 #

Axios的请求配置中，请求头对应的字段是**headers**（复数形式），你写的header（单数）不会被Axios识别，Token自然无法被添加到请求头里。

2. 给useEffect添加正确的依赖项 #

你的useEffect依赖数组为空，当管理员登录后Token更新时，这个副作用不会重新执行，依然会用初始的空Token发送请求。需要把token加入依赖数组，确保Token变化时自动重新发起请求。

3. 增加Token非空判断 #

避免在Token尚未获取到的情况下发送无效请求，减少不必要的401错误。

修改后的完整代码 #

// React
import React, { useContext, useState, useEffect } from "react";

// Axios
import Axios from "axios";

// Contexts
import { LoginDataContext } from "../Contexts/LoginContext";
import { TokenDataContext } from "../Contexts/TokenContext";
import { UserIdDataContext } from "../Contexts/UserIdContext";

// Icons
import { HiArrowNarrowUp, HiArrowNarrowDown} from "react-icons/hi";

const AdminDashboard = () => {
  const { user } = useContext(LoginDataContext);
  const { token } = useContext(TokenDataContext);
  const { userid } = useContext(UserIdDataContext);

  const [Subscriber, SetSubscriber] = useState([]);

  useEffect(() => {
    // Token为空时不发送请求
    if (!token) return;

    Axios.get(`http://localhost:4000/api/v1/subscribers`, {
      // 正确使用headers字段传递授权令牌
      headers: {
        'Authorization': `Bearer ${token}`
      }
    })
    .then((res) => {
      console.log(res.data);
      SetSubscriber(res.data);
    })
    .catch(err => {
      // 捕获错误便于调试具体原因
      console.error('请求失败:', err.response?.data || err.message);
    });
  }, [token]); // 依赖token，Token更新时自动重新执行

  // 组件其他逻辑...
};

额外优化建议 #

可以全局配置Axios的默认请求头，避免每个请求重复编写Authorization字段：

// 在项目入口文件或单独的Axios配置文件中
import Axios from 'axios';

// 设置全局默认接口前缀
Axios.defaults.baseURL = 'http://localhost:4000/api/v1';

// 封装Token更新方法
export const setAuthToken = (token) => {
  if (token) {
    Axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
  } else {
    delete Axios.defaults.headers.common['Authorization'];
  }
};

后续在管理员登录成功后调用setAuthToken(token)，所有Axios请求都会自动带上Token，无需每次手动配置请求头。

内容的提问来源于stack exchange，提问作者Daniel707