NextAuth getToken 在服务端返回 null 的问题排查与解决-js教程-PHP中文网

NextAuth getToken 在服务端返回 null 的问题排查与解决

霞舞

发布： 2025-08-25 19:52:01

原创

896人浏览过

nextauth gettoken 在服务端返回 null 的问题排查与解决

问题描述

在使用 Next.js 和 NextAuth 构建应用程序时，有时需要在服务端获取用户的身份验证信息。getToken 函数是 NextAuth 提供的一个便捷方法，用于从请求中提取 JWT (JSON Web Token)。然而，在某些情况下，尤其是在使用 getServerSideProps 或中间件时，getToken 函数可能会返回 null，导致无法获取到预期的 token。

本文档旨在解决 Next.js 项目中使用 NextAuth 的 `getToken` 函数在服务端获取 token 时返回 `null` 的问题。通常情况下，这个问题是由于服务端获取数据时 cookie 没有正确传递导致的。本文将详细介绍问题的原因以及如何通过手动传递 cookie 来解决此问题，确保 `getToken` 函数在服务端正常工作。

登录后复制

问题原因分析

问题的根本原因在于，当在 getServerSideProps 或其他服务端上下文中，使用 fetch 或类似方法调用 API 接口时，默认情况下，浏览器的 cookie 不会自动包含在请求头中。由于 getToken 函数依赖于请求中的 cookie 来验证用户身份，如果 cookie 缺失，getToken 自然无法正确解析并返回 token，从而返回 null。

解决方案：手动传递 Cookie

要解决这个问题，需要在服务端发起的请求中手动传递 cookie。以下是在 getServerSideProps 中传递 cookie 的示例：

export async function getServerSideProps(context) {
  const { req } = context;

  const tokenRes = await fetch(`${process.env.NEXT_PUBLIC_BASE_PATH}/api/test`, {
    headers: {
      Cookie: req.headers.cookie,
    },
  });

  const token = await tokenRes.json();

  console.log(token);

  return {
    props: {
      token: token,
    },
  };
}

登录后复制

代码解释：

context 参数： getServerSideProps 函数接收一个 context 参数，其中包含请求 (req) 和响应 (res) 对象。
req.headers.cookie： 从 req.headers 中获取 cookie 字符串，该字符串包含了客户端发送的所有 cookie。
fetch 请求头： 在 fetch 请求的 headers 选项中，设置 Cookie 字段的值为 req.headers.cookie。这样，服务端发起的请求就会携带客户端的 cookie 信息。

完整示例

以下是一个完整的示例，展示了如何在 Next.js 页面中使用 getServerSideProps 获取 token，并在 API 接口中使用 getToken 函数：

1. API 接口 (pages/api/test.js):

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

import { getToken } from 'next-auth/jwt';

export default async function handler(req, res) {
  const token = await getToken({ req });

  res.status(200).json({ user: token });
}

登录后复制

2. Next.js 页面 (pages/test.js):

const TestPage = (props) => {
  const { token } = props;

  return (
    <div>
      <button onClick={() => console.log(token)}>Test Token</button>
      {token ? (
        <pre>{JSON.stringify(token, null, 2)}</pre>
      ) : (
        <p>No token found.</p>
      )}
    </div>
  );
};

export async function getServerSideProps(context) {
  const { req } = context;

  const tokenRes = await fetch(`${process.env.NEXT_PUBLIC_BASE_PATH}/api/test`, {
    headers: {
      Cookie: req.headers.cookie,
    },
  });

  const token = await tokenRes.json();

  return {
    props: {
      token: token,
    },
  };
}

export default TestPage;

登录后复制

3. 配置 NextAuth (pages/api/auth/[...nextauth].js):

import NextAuth from "next-auth"
import GithubProvider from "next-auth/providers/github"

export const authOptions = {
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET
    })
  ],
  secret: process.env.NEXTAUTH_SECRET,
  callbacks:{
    async jwt({ token, user }) {
      return { ...token, ...user }
    },
    async session({ session, token, user }) {
        session.user = token;
        return session;
      }
  }
}

export default NextAuth(authOptions)

登录后复制

注意: 确保你的 .env.local 文件中包含 NEXTAUTH_SECRET 环境变量。