如何在Axios实例中动态传递参数（Redux Token场景）

问题分析 #

你的代码存在两个核心问题：一是requestMethod.js里的请求头属性拼写错误（header应为headers），二是Products.js中误用了未定义的publicRequest，没有调用userRequest传入从Redux获取的Token来创建带权限的请求实例。

修正步骤及代码 #

1. 修正requestMethod.js的请求头拼写

import axios from "axios";
const BASE_URL = "http://localhost:5000/e-mart/";

// 动态传入Token创建带权限的Axios实例
export const userRequest = (TOKEN) => axios.create({ 
  baseURL: BASE_URL,
  headers: { token: `Bearer ${TOKEN}` }, // 修正为复数headers
});

2. 修正Products.js的请求逻辑

import { userRequest } from "../requestMethods";
import { useSelector } from "react-redux";
import { useEffect, useState } from "react";

const Products = () => {
  const [products, setProducts] = useState([]);
  // 从Redux store获取Token，兼容Token未初始化的情况
  const { accessToken } = useSelector((state) => state.user.currentUser) || {};

  useEffect(() => {
    // Token不存在时终止请求逻辑
    if (!accessToken) return;
    
    const abortController = new AbortController();
    const getProducts = async () => {
      try {
        // 传入Token创建带权限的请求实例
        const authRequest = userRequest(accessToken);
        const res = await authRequest.get(
          `products`,
          { signal: abortController.signal }
        );
        setProducts(res.data);
      } catch (err) {
        console.log(err.message);
      }
    };
    getProducts();

    return () => {
      abortController.abort();
    };
  }, [accessToken]); // 监听Token变化，自动更新请求

  return (
    <div>
      {products.map(product => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  );
};

export default Products;

关键说明 #

• 请求头拼写修正：Axios的配置属性中请求头是headers（复数），拼写错误会导致Token无法被携带到请求中。
• Token依赖监听：将accessToken加入useEffect的依赖数组，当Redux中的Token更新时，会自动重新发起请求，保证使用最新的有效Token。
• 空值防护：添加if (!accessToken) return，避免在Token未加载完成或过期失效时发起无效请求。

内容的提问来源于stack exchange，提问作者Emdadudl Haque Apu