Next-Auth自动生成JWT无法作为POST请求授权，该如何解决？

你遇到的核心问题是：默认情况下Next-Auth的next-auth.session-token不是JWT，只是数据库会话的ID，直接把它当成Bearer令牌传给后端，后端无法识别验证。下面分两种场景给出解决方案：

场景1：改用JWT会话策略（生成可直接验证的JWT令牌） #

如果你希望用JWT作为授权凭证，需要先在Next-Auth配置里切换到JWT策略，再正确获取JWT令牌：

1. 配置Next-Auth使用JWT策略 #

在pages/api/auth/[...nextauth].ts中修改配置：

import NextAuth from "next-auth";
import { authOptions } from "./authOptions"; // 你的登录提供者配置

export default NextAuth({
  ...authOptions,
  session: {
    strategy: "jwt", // 启用JWT会话策略
    maxAge: 24 * 60 * 60, // 会话有效期，可选
  },
  callbacks: {
    // 在JWT生成时注入自定义数据（比如用户ID）
    async jwt({ token, user }) {
      if (user) {
        token.userId = user.id;
        // 若有自定义访问令牌，可在此添加
        // token.accessToken = user.accessToken;
      }
      return token;
    },
    // 将JWT数据同步到session，供前端获取
    async session({ session, token }) {
      session.user.userId = token.userId as string;
      // session.accessToken = token.accessToken as string;
      return session;
    },
  },
});

2. 前端正确获取JWT并发送请求 #

用Next-Auth的useSession钩子获取会话中的JWT，而非直接从Cookie读取next-auth.session-token：

import { useSession } from "next-auth/react";
import { FormEvent, useState } from "react";

const [clicked, setClicked] = useState(false);
const [id, setId] = useState("");

const { data: session } = useSession();

async function createContent(event: FormEvent<HTMLFormElement>) {
  event.preventDefault();
  if (!session) return; // 确保用户已登录

  try {
    const formData = new FormData(event.currentTarget);
    // JWT策略下，session的token即为可验证的JWT
    const jwtToken = session.user?.token || session.accessToken;

    const contentBody = await api.post('/content', {
      content: formData.get('content'),
    }, {
      headers: {
        Authorization: `Bearer ${jwtToken}`
      }
    });
    setClicked(true);
    setId(contentBody.data.contentCreated.id);
  } catch (error) {
    console.error("创建内容出错:", error);
  }
}

场景2：保留默认数据库会话策略 #

如果不想切换到JWT策略，后端可通过next-auth.session-token查询会话验证用户，前端无需手动添加Authorization头：

1. 后端API验证会话 #

在你的POST接口（如pages/api/content.ts）中，用Next-Auth的getServerSession验证用户：

import { getServerSession } from "next-auth/next";
import { authOptions } from "../auth/[...nextauth]";

export default async function handler(req, res) {
  if (req.method !== "POST") {
    return res.status(405).json({ message: "方法不允许" });
  }

  // 自动从Cookie中读取session-token并验证
  const session = await getServerSession(req, res, authOptions);
  if (!session) {
    return res.status(401).json({ message: "未授权" });
  }

  // 执行创建内容的逻辑，session已包含用户信息
  const newContent = { id: "your-content-id", content: req.body.content };

  res.status(200).json({ contentCreated: newContent });
}

2. 前端简化请求 #

Next-Auth的Cookie会自动随同域请求发送，前端可去掉Authorization头：

async function createContent(event: FormEvent<HTMLFormElement>) {
  event.preventDefault();

  try {
    const formData = new FormData(event.currentTarget);
  
    const contentBody = await api.post('/content', {
      content: formData.get('content'),
    });
    setClicked(true);
    setId(contentBody.data.contentCreated.id);
  } catch (error) {
    console.error("创建内容出错:", error);
  }
}

额外注意：跨域请求处理 #

若API为跨域，需：

• 在Next-Auth配置中添加trustHost: true
• 前端请求配置withCredentials: true（如axios实例中设置axios.defaults.withCredentials = true）

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