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 = wait fetch(`${process.env.NEXT_PUBLIC_BASE_PATH}/api/test`， { headers： { Cookie： req.headers.cookie， }， })； const token = wait 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)：import { getToken } from 'next-auth/jwt'；导出默认异步函数 handler(req， res) { const token = wait getToken({ req })； res.status(200).json({ user： token })；}登录后复制

2. Next.js 页面 (pages/test.js)：const TestPage = (props) =gt； { const { token } = props； return ( lt；divgt； lt；button onClick={() =gt； console.log(token)}gt；测试令牌lt；/buttongt； {token ? ( lt；pregt；{JSON.stringify(token， null， 2)}lt；/pregt； ) ： ( lt；pgt；No token found.lt；/pgt； )} lt；/divgt； )；}；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)：从“next-auth”导入 NextAuth；从“next-auth/providers/github”导入 GithubProvider；export const authOptions = { provider： [ GithubProvider({ clientId： process.env.GITHUB_ID， clientSecret： process.env.GITHUB_SECRET }) ]， secret： process.env.NEXTAUTH_SECRET， callers：{ async jwt({ token， user }) { retur

n { ...token， ...user } }， async session({ session， token， user }) { session.user = token； return session； } }}export default NextAuth(authOptions) 登录后复制

注意：确定你的 .env.local 文件中包含 NEXTAUTH_SECRET 环境变量。注意事项安全性：虽然手动传递 cookie 出了问题，但需要注意解决安全性。确保只在受信任的服务端环境中提交cookie，避免泄露敏感信息。CORS：如果你的 API 接口位于不同的域名下，可能需要配置 CORS (跨域资源共享)策略，以允许跨域请求 cookie。中间件：类似地，在 Next.js 中间件中使用 getToken 时，也需要手动提交 cookie。环境标志：确定 NEXT_PUBLIC_BASE_PATH 指向你应用程序的正确基础路径。总结

通过手动提交 cookie，可以解决 NextAuth 的getToken 函数在服务端返回 null 的问题。了解问题的根源，并采取相应的措施，可以确保 NextAuth 在各个服务端场景下均正常工作，从而构建安全可靠的Next.js应用程序。

以上就是NextAuth getToken在服务端返回null的问题排查与解决的详细内容，更多请关注乐哥常识网其他文章相关！