问题： 我最近开始在我的应用程序中使用 Next.js 13 和 NextAuth 进行身份验证。但是，我遇到了一个令人费解的问题，即每次页面刷新时都会出现登录页面。我密切关注文档并检查了我的代码，但我似乎无法查明问题的原因。我的怀疑在于我如何包装我的会话提供程序或我的布局组件。
问题： 刷新任何页面后，即使用户之前已通过身份验证，应用程序也会重定向到登录页面。此行为是意外的，并且与所需的用户体验不符。
我有这个组件/Layout.js
"use client";
import Image from "next/image";
import { useSession, signIn, signOut } from "next-auth/react";
import Nav from "./Nav";
export default function Layout({ children }) {
const { data: session } = useSession();
if (!session) {
return (
<div className={"bg-blue-900 w-screen h-screen flex items-center"}>
<div className="text-center w-full">
<button
onClick={(e) => {
e.preventDefault();
signIn("google");
}}
className="bg-white p-2 px-4 rounded-lg"
>
Login With
</button>
</div>
</div>
);
}
return (
<div className={"bg-blue-900 min-h-screen flex"}>
<Nav />
<div className="bg-white flex-grow mt-2 mr-2 rounded-lg p-4">
{children}
</div>
</div>
);
}
然后我就有了这个根layout.js文件
import { NextAuthProvider } from "./NextAuthProvider";
import Layout from "./components/Layout";
import "./globals.css";
import { SessionProvider } from "next-auth/react";
import { getServerSession } from "next-auth/next";
import { authOptions } from "../pages/api/auth/[...nextauth]";
export default async function RootLayout({ children }) {
const session = await getServerSession(authOptions);
return (
<html>
<head />
<body>
<NextAuthProvider>
<Layout>{children}</Layout>
</NextAuthProvider>
;
</body>
</html>
);
}
我之前使用 getServerSession 解决了这个问题，但现在它停止工作并给了我一个 jwt 会话错误，所以我删除了我的解决方法。
解决此问题的一种方法可能是放弃使用layout.js并使用_app.js
import type { AppProps } from "next/app";
import { SessionProvider } from "next-auth/react";
import Script from "next/script";
export default function App({ Component, pageProps }: AppProps) {
return (
<SessionProvider session={pageProps.session}>
<Component {...pageProps} />
</SessionProvider>
);
}
这个实现使用起来要简单得多。这也是他们在文档中建议的方式。该问题也可能出在您的
[...nextauth].js