在Next.js中使用SWR携带Bearer Token从Strapi取数遇问题求助

代码存在的核心问题 #

1. useSWR参数传递错误：useSWR若要给fetcher传递额外参数，必须将参数与请求URL放在数组中作为第一个参数（请求标识）。你直接把auth作为第二个参数传入，useSWR会将其视为重新请求的触发标识，而非传给fetcher的参数，导致fetcher根本没拿到认证Token。
2. 未携带认证请求头：你的fetcher函数没有在axios请求中添加Authorization头，Strapi后端无法识别身份，因此不会返回授权数据，最终data为undefined。

正确的Bearer Token数据获取写法 #

const address = `${process.env.NEXT_PUBLIC_API_URL}/products`;
const authToken = process.env.NEXT_PUBLIC_API_TOKEN;

// 改造fetcher，添加认证请求头
const fetcher = async (url, token) => {
  const res = await axios.get(url, {
    headers: {
      Authorization: `Bearer ${token}`
    }
  });
  return res.data;
};

// 将URL和Token放入数组，确保fetcher能接收参数
const { data, error } = useSWR([address, authToken], fetcher);

// 可添加状态判断，避免初始阶段打印undefined
if (error) return <div>请求失败</div>;
if (!data) return <div>加载中...</div>;

console.log(data);

额外注意事项 #

• 环境变量校验：确保NEXT_PUBLIC_API_URL和NEXT_PUBLIC_API_TOKEN已在.env.local中正确配置，且变量前缀NEXT_PUBLIC_无误（客户端环境变量必须加此前缀）。
• Strapi权限配置：检查Strapi后台products内容类型的权限设置，确保已开启对应访问权限（若使用API Token，需确认Token拥有该接口的访问权限）。
• Token有效性：确认使用的Token是Strapi生成的有效API Token（或用户JWT Token），避免过期或权限不足。

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