NextJS结合Auth0如何在客户端SWR fetcher中获取Bearer Token调用API

报错原因说明 #

你用到的getAccessToken是身份验证框架提供的服务端专用方法（比如NextAuth、Auth0的服务端侧API），仅能在服务端运行环境调用，直接在客户端代码执行就会触发报错。

分步解决方案 #

1. 确定token获取场景 #

• 如果你使用服务端渲染框架（如Next.js）：优先在服务端组件/服务端接口路由中获取token，可直接在服务端完成后端请求再把数据返回给前端，避免token暴露到客户端
• 如果你需要在客户端发起请求：使用对应身份框架的客户端侧token获取方法，比如NextAuth用useSession()钩子、Auth0用useAuth0()钩子获取accessToken，不要调用服务端的getAccessToken

2. 改造fetcher添加Bearer请求头 #

修改fetcher代码支持接收token参数，注入到fetch请求头中：

const fetcher = async (url, accessToken) => {
  const response = await fetch(url, {
    headers: {
      ...(accessToken && { Authorization: `Bearer ${accessToken}` })
    }
  });
  // 接口返回非2xx状态码主动抛错，方便SWR捕获
  if (!response.ok) {
    throw new Error(`请求错误：${response.status}`)
  }
  const data = await response.json();
  return { data };
};

3. 客户端场景调用示例（以NextAuth为例） #

通过客户端钩子拿到token后，再触发SWR请求：

import { useSession } from "next-auth/react";
import useSWR from "swr";

function YourComponent() {
  const { data: session } = useSession();
  const accessToken = session?.accessToken;

  // 当token存在时才发起请求，避免无效401
  const { data, error } = useSWR(
    accessToken ? ["data", accessToken] : null, 
    ([url, token]) => fetcher(url, token)
  );

  if (error) return <div>oops... {error.message}</div>;
  if (data === undefined) return <div>Loading...</div>;
  return <div>{data}</div>;
}

4. 服务端场景调用示例 #

如果必须使用服务端的getAccessToken，请将请求逻辑迁移到服务端：

1. 新建服务端接口路由（比如Next.js的app/api/get-shows/route.js），在路由内调用getAccessToken获取token，再请求后端接口拿数据，最后把数据返回给前端
2. 前端直接请求你自己新建的/api/get-shows接口即可，不需要额外处理Authorization头

补充说明 #

你代码里的scopes是权限范围参数，需要和后端JWT校验要求的权限对应，如果后端没有特殊权限限制可以留空，也可以直接和后端对接确认需要配置的scope值。

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