Next JS + Next Auth Protected 页面在重定向后加载几秒钟答案

【问题标题】：Next JS + Next Auth Protected page loads for seconds after redirectionNext JS + Next Auth Protected 页面在重定向后加载几秒钟
【发布时间】：2021-07-22 17:25:23
【问题描述】：

我正在尝试通过以下方式重定向到受保护的页面：

<button
  onClick={() => {
    router.push("/welcome");
  }}
>

欢迎页面通过以下方式受到保护：

import { useSession, signOut } from "next-auth/client";
import { useRouter } from "next/router";
import { useEffect } from "react";

export default function Welcome() {
  const [session, loading] = useSession();
  const router = useRouter();

  useEffect(() => {
    if (!loading && !session?.accessToken) {
      router.push("/auth/login");
    }
  }, [loading, session]);

  if (!session) {
    return <div></div>;
  }
  return (
    <div>
      <h1>Welcome Page</h1>
    </div>
  );
}

如果我尝试直接访问欢迎页面，它可以正常工作。但是如果我使用 router.push()，加载需要几秒钟。它主要发生在使用浏览器的后退按钮从欢迎页面返回然后再次按下该按钮之后。虽然有时还是会发生。

我做错了什么？有人告诉我这是开发环境的正常行为，但它也发生在生产环境中。

这是一个复制品：

https://codesandbox.io/s/distracted-browser-fyjek

【问题讨论】：

您是否尝试按照文档中的说明将<Provider> 添加到pages/_app.js？
是的，它解决了！谢谢！

标签： next.js next-auth

【解决方案1】：

我通过使用 Provider 将我的组件包装在 _app.tsx 中解决了这个问题，如下所示：

<Provider session={pageProps.session}>
  <Component {...pageProps} />
</Provider>;

添加

export async function getServerSideProps(context: NextPageContext) {
  const session = await getSession(context);
  return {
    props: { session },
  };
}

到服务器端呈现的页面，如解释 here。

【讨论】：