Next14对接自定义Spring Boot后端认证：next-auth相关问题咨询

1. NextAuth 是不是最佳方案？ #

是。Auth.js（原NextAuth）是Next.js生态中最成熟的认证解决方案之一，完美适配Next14的App Router和Pages Router，能帮你快速处理会话管理、token存储/刷新、路由保护等核心认证逻辑，比从零实现认证流程效率更高、安全性也更有保障。

2. 是否需要自定义提供者？ #

不需要。Credentials Provider就是专门为对接自定义账号密码验证后端设计的，直接用它即可，无需额外开发自定义提供者。

3. Credentials 模式后续实现步骤 #

3.1 配置 Auth.js 后端逻辑 #

在app/api/auth/[...nextauth]/route.ts文件中完成核心配置：

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export const authOptions = {
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "email" },
        password: { label: "Password", type: "password" }
      },
      // 核心验证逻辑：调用你的Spring Boot后端接口
      async authorize(credentials) {
        if (!credentials?.email || !credentials?.password) {
          return null;
        }

        // 调用Spring Boot的认证接口
        const response = await fetch("http://your-spring-boot-api/auth/login", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            email: credentials.email,
            password: credentials.password,
          }),
        });

        // 验证接口返回结果
        if (!response.ok) {
          return null;
        }

        // 获取后端返回的用户信息和Token
        const user = await response.json();
        // 返回的对象会存入JWT和会话中
        return { ...user, id: user.userId, token: user.accessToken };
      },
    }),
  ],
  // 会话策略：默认jwt，适合无场景
  session: { strategy: "jwt" },
  // 自定义JWT回调：处理Token刷新等逻辑
  callbacks: {
    async jwt({ token, user }) {
      // 首次登录时，把后端返回的Token和用户信息加到JWT里
      if (user) {
        token.accessToken = user.token;
        token.userId = user.id;
      }
      return token;
    },
    // 自定义Session回调：把JWT数据同步到前端会话
    async session({ session, token }) {
      session.user.id = token.userId;
      session.user.accessToken = token.accessToken;
      return session;
    },
  },
  // 自定义登录页路径（可选，默认用NextAuth自带页面）
  pages: {
    signIn: "/login",
  },
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

3.2 完善前端登录组件 #

补充你的LoginForm的错误处理和跳转逻辑：

"use client";

import { signIn, useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { FormEvent } from "react";

const LoginForm = () => {
  const router = useRouter();
  const { data: session } = useSession();

  // 已登录则直接跳首页
  if (session) {
    router.push("/");
    return null;
  }

  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const email = formData.get("email") as string;
    const password = formData.get("password") as string;

    const response = await signIn("credentials", {
      email,
      password,
      redirect: false,
    });

    // 根据返回结果处理登录状态
    if (response?.ok) {
      router.push("/");
    } else {
      alert(response?.error || "登录失败，请检查邮箱或密码");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" placeholder="邮箱" required />
      <input type="password" name="password" placeholder="密码" required />
      <button type="submit">登录</button>
    </form>
  );
};

export default LoginForm;

3.3 路由保护（Next14 App Router） #

创建middleware.ts文件，全局拦截未登录用户访问受保护路由：

export { default } from "next-auth/middleware";

// 指定需要保护的路由（支持通配符）
export const config = {
  matcher: ["/dashboard/:path*", "/profile"],
};

3.4 在组件中获取会话信息 #

在需要用户数据的组件中，用useSession钩子获取登录状态和用户信息：

"use client";

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

const Profile = () => {
  const { data: session, status } = useSession();

  if (status === "loading") {
    return <div>加载中...</div>;
  }

  if (!session) {
    return <div>请先登录</div>;
  }

  return (
    <div>
      <h1>欢迎，{session.user.email}</h1>
      <p>你的用户ID: {session.user.id}</p>
    </div>
  );
};

export default Profile;

4. 额外注意事项 #

• 确保Spring Boot后端的CORS配置允许Next.js前端域名访问，避免跨域错误。
• 如果后端Token有过期时间，需在jwt回调中实现Token刷新逻辑，调用后端刷新接口更新Token。
• 生产环境中，后端API地址不要硬编码，用环境变量（.env.local）存储，比如NEXT_PUBLIC_SPRING_BOOT_API=http://your-api-url。

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