全棧身份認證實作：使用 Next.js、NextAuth.js 和 MongoDB－7. 用戶登出

用戶登出功能的實現，並利用 Middleware 控制對特定頁面的訪問。

參考: Next.js (Middleware)

7–1. 創建登出按鈕

• 在 component/button 資料夾中新增 signout-button.tsx，並使用 signOut function 從 next-auth 中進行登出。
• 登出後將頁面導向登入頁，使用 window.location.origin 獲取當前頁面的根URL， window.location 提供當前頁面 URL 的資訊， origin 是其中一個屬性，包含協議、域名、端口，例如目前使用的 http://localhost:3000。
• 在 userNav 組件（user-nav.tsx）中使用 SignOutButton。

程式碼

登出按鈕

7–2. 設定 Middleware

• 在專案根目錄下新增 middleware.ts，以限制未登入用戶訪問特定頁面（如 /profile），於 nextauth-options.ts 加上指定的登入頁面（signIn: “/signin”）。
• 如果未登入的用戶嘗試訪問這些受保護的頁面，會被重定向到登入頁面。此重定向會包含一個 callbackUrl 參數，確保用戶在成功登入後能夠返回到原先試圖訪問的頁面，例如：http://localhost:3000/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Fprofile

程式碼

callbackUrl 參數

單元重點

• 新增登出按鈕，並使用 signOut 功能。
• 設定 middleware 針對特定的路由進行使用者認證，於 nextauth-options.ts 加上指定的登入頁面。

參考資料

Next.js (Middleware)－https://next-auth.js.org/configuration/nextjs#middleware

回到目錄
https://medium.com/p/3d2a3ec1d3b6