0

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

<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

4

1 回答 1

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。

于 2021-05-01T15:02:31.713 回答