next.js - Next JS + Next Auth Protected 页面在重定向后加载几秒钟
问题描述
我正在尝试通过以下方式重定向到受保护的页面:
<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(),加载需要几秒钟。它主要发生在使用浏览器的后退按钮从欢迎页面返回然后再次按下该按钮之后。尽管它有时还是会发生。
我究竟做错了什么?有人告诉我这是开发环境的正常行为,但它也发生在生产环境中。
这是一个复制品:
解决方案
我通过使用 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。
推荐阅读
- node.js - NodeJs 将文件上传到 AWS S3 - 文件损坏
- python - 为什么我的用于糖尿病视网膜病变检测的 Keras CNN 根本不起作用
- amazon-web-services - AWS Glue 作业 - 写入单个 Parquet 文件
- python - Python:模拟引发异常的模块
- java - 将 JConsole 输出记录到 CSV 文件中。时间价值背后的逻辑是什么?
- php - 在正文中创建包含表格的电子邮件时出现问题
- java - 在运行时动态创建实体 - 使用 Gorm orm 的 Spring boot、hibernate、Java 或 Grails?
- sql - ORA-32040 在过程中,如何重写查询
- java - 如何以快速采样频率(例如,100Hz - 200Hz)有效地处理传入的 MQTT 消息
- python - 在python中搜索列表的最快方法