情境

登入其實就是登入，恩。

如果覺得換個專案就要再弄一次登入很煩的話，這個也可以算是你的情境 XD

實際弄下來會是透過 Context 組成的 Provider + Custom Hook 的相關應用，這種組合其實也常常遇到，例如 MUI 的 ThemeProvider + useTheme，或一些套件的前置動作都要你加上一層 Provider 再進一步使用相關的元件或是hook，畢竟功能要在同一個上下文才能彼此對應來互動或取其內容，那今天就來登入吧！

功能及描述

當然就是：

• 使用者能輸入特定資訊驗證，並進一步登入
• 使用者能主動登出
• 使用者在登入後，關閉網站回來仍能繼續瀏覽 (儲存機制)
• 使用者不論何時驗證失敗時，進行(或保持)登出

再更詳細會是這樣：

• 第一次造訪的使用者會先到登入頁面，登入之後會導向的APP本身的畫面。
• 已登入過且儲存資訊過的使用者將會在重新造訪時進行驗證，並成功進入到APP本身；反之驗證失敗則到登入畫面。
• 使用者登出後會回到登入頁面。

好，文字太抽象，來看畫面吧！

頁面大致有三頁：

• 登入頁 (Login Page)
• 主頁面 (Main / Page One)
• 次頁面 (Sub / Page Two)

登入後會到主頁面，主頁面可以進入到次頁面，主頁面登出會回到登入頁，看起來沒甚麼問題，來開工吧！ (下篇待續)

注意事項

此篇主要是以 CSR (Clinet-side render) 為需求的登入模式為主，若你是透過 SSR (Server-side render) 的話，可能使用 cookie / session / server 等等方式來進行登入登出，此情境可能就不符合或不適用；我在製作過程中有遇到 remix 與 useNavigate + useEffect 有所衝突，因此將此範例另外用 remix-utils 的 <ClientOnly /> 包裝，特此分享。