如何在React Next.js中创建受保护的页面

Question

我对nextjs很陌生。我正在尝试为我的Web应用程序中的授权用户创建受保护的页面。

有人对它的结构有任何想法吗？谢谢！

Answer 1

要回答你的问题，这取决于。 您可以通过两种方式做到这一点：

前端保护

当页面加载时，显示某种加载状态。例如旋转器。 同时，检查用户是否已登录，如果未登录，则使用 next/router 将用户重定向到登录页面（例如）。

服务器保护

对于服务器保护，您可以使用 getServerSideProps 函数。它看起来像这样：

export async function getServerSideProps(context) {
  // fetch user logged state
  // check if user is logged
  // you can use server side redirection or pass "redirect" prop to 
  // the component and redirect on page load
  return {
    props: {}, // will be passed to the page component as props
  }
}