如何在反應 nextjs 中創建受保護的頁面

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
  }
}