Next.js + NextAuth认证检查最优方案：重定向还是渲染登录组件？

重定向 vs 内嵌登录组件：怎么选？ #

• 重定向到登录页：适合页面内容完全需要认证才能访问，或者需要完整登录流程（比如多步骤验证、注册入口）的场景。优点是逻辑清晰，用户体验统一；缺点是页面跳转可能打断当前操作。
• 内嵌登录组件：适合页面仅部分内容需要认证（比如评论区、个人资料编辑模块），或者希望用户登录后直接在当前页面继续操作的场景。优点是无需跳转，体验流畅；缺点是需要处理组件内的状态切换，布局要兼容未登录/已登录两种状态。

更简洁规范的实现方案 #

1. 自定义认证钩子（推荐） #

封装重复的认证逻辑，让组件代码更简洁：

// hooks/useAuth.js
import { useSession, signIn } from "next-auth/react";

export function useAuth({ required = false, onUnauthenticated } = {}) {
  const { data: session, status } = useSession();
  const isLoading = status === "loading";

  // 强制认证且未登录时的处理逻辑
  if (required && !isLoading && !session) {
    if (typeof onUnauthenticated === "function") {
      onUnauthenticated();
    } else {
      // 默认重定向到登录页，登录后返回原页面
      signIn(undefined, { callbackUrl: window.location.href });
    }
  }

  return { session, isLoading, isAuthenticated: !!session };
}

组件中使用示例：

// pages/protected-page.js
import { useAuth } from "../hooks/useAuth";

export default function ProtectedPage() {
  const { session, isLoading } = useAuth({ required: true });

  if (isLoading) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <h1>欢迎，{session.user.name}</h1>
      {/* 页面核心内容 */}
    </div>
  );
}

2. 服务端认证检查（更安全） #

对于完全受保护的页面，优先用服务端校验，避免客户端渲染时的内容闪烁：

方式一：getServerSideProps（Pages Router）

// pages/protected-page.js
import { getSession } from "next-auth/react";
import { useSession } from "next-auth/react";

export default function ProtectedPage() {
  const { session } = useSession();
  return <h1>欢迎，{session.user.name}</h1>;
}

export async function getServerSideProps(context) {
  const session = await getSession(context);
  if (!session) {
    return {
      redirect: {
        destination: "/api/auth/signin?callbackUrl=/protected-page",
        permanent: false,
      },
    };
  }
  return { props: {} };
}

方式二：Middleware（App Router / Pages Router通用）

在项目根目录创建middleware.ts，自动拦截未登录用户访问受保护路由：

// middleware.ts
import { withAuth } from "next-auth/middleware";

export default withAuth({
  pages: {
    signIn: "/login", // 自定义登录页路径
  },
});

// 指定需要保护的路由规则
export const config = {
  matcher: ["/dashboard/:path*", "/profile"],
};

这种方式无需在每个页面写重复逻辑，代码极简且安全性高。

3. 内嵌登录组件的实现 #

如果需要在当前页面内嵌登录模块，结合自定义钩子做条件渲染：

// components/LoginEmbed.js
import { signIn } from "next-auth/react";

export default function LoginEmbed() {
  return (
    <div className="login-container">
      <h3>请登录以继续操作</h3>
      <button onClick={() => signIn("credentials")}>账号密码登录</button>
      <button onClick={() => signIn("google")}>Google快捷登录</button>
    </div>
  );
}

页面中使用示例：

// pages/semi-protected-page.js
import { useAuth } from "../hooks/useAuth";
import LoginEmbed from "../components/LoginEmbed";

export default function SemiProtectedPage() {
  const { session, isLoading } = useAuth();

  if (isLoading) {
    return <div>加载中...</div>;
  }

  if (!session) {
    return <LoginEmbed />;
  }

  return (
    <div>
      <h1>专属内容区域</h1>
      {/* 已登录可见的内容 */}
    </div>
  );
}

总结 #

• 完全受保护的页面：优先用Middleware或getServerSideProps做服务端重定向，安全且代码简洁。
• 部分内容需要认证：用自定义钩子+内嵌登录组件，提升用户操作流畅度。
• 需要统一登录流程：重定向到独立登录页，保持全站点体验一致性。

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