NextAuthgetToken服务端返回null解决方法

你在学习文章相关的知识吗？本文《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,
    },
  };
}

代码解释：

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

完整示例

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

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

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)}

No token found.