如何在next.js中创建私有路由？
如何在next.js中创建私有路由？
提问于 2021-03-21 09:12:23
我想包装我的整个应用程序，这样除非用户登录，否则它是不可访问的。如果用户没有登录，我设法将用户重定向到登录页面，但是，在重定向发生之前，我仍然看到私有路由的闪现。如何才能避免这种情况？
回答 1
Stack Overflow用户
发布于 2021-03-21 11:30:19
因为NextJS是在服务器端呈现的，所以您需要使用getServerSideProps检查身份验证，或者在重定向之前在前端显示一个加载指示器。
检查身份验证客户端
创建一个包装器组件并将其放入_app.js文件中。通过在用户仍在进行身份验证时显示加载组件，可以防止显示私有仪表板。注意:因为Next.js是在服务器端呈现的，所以它总是在JS恢复状态之前出现。这意味着，第一次绘制总是在重定向开始之前发生。
import { useRouter } from 'next/router'
export const AuthCheck = (props) => {
const router = useRouter()
const user = useUser() // you need to implement this. In this example, undefined means things are still loading, null means user is not signed in, anything truthy means they're signed in
if (typeof window !== 'undefined' && user === null) router.push('/sign-in')
if(!user) return <Loading /> // a loading component that prevents the page from rendering
return props.children
}然后在你的_app.js中
const MyApp = ({ Component, pageProps }) => {
return (
<AuthCheck>
<Component {...pageProps} />
</AuthCheck>
)
}
export default MyApp检查身份验证服务器端
假设您已经设置了代码来检查服务器端的身份验证，您可以使用此模式。注意:您需要将此代码添加到每个页面。getServerSideProps does not work with _app.js或_document.js
export const getServerSideProps = async () => {
const isAuthenticated = await checkAuthentication() // you need to implement this
if (!isAuthenticated) {
return {
redirect: { destination: '/sign-in', permanent: false },
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66727980
复制相关文章
相似问题
腾讯云开发者
