全棧身份認證實作：使用 Next.js、NextAuth.js 和 MongoDB－14. 路由權限驗證

使用 Middleware 設置路由保護機制，根據用戶身份限制訪問。

參考: Next.js (Middleware)

14–1. 設置路由權限

• 修改 middleware.ts，使用 withAuth 來進行權限驗證。通過 callbacks.authorized 檢查 token 的有效性，以控制對特定路由的訪問權限並決定是否執行 middleware function。
• 根據用戶的角色（如 admin 或 user）為需要保護的路徑（如 /dashboard）添加額外的路由權限檢查。

14–2. 處理未授權訪問

• 如果用戶嘗試訪問未授權的路由，則將其重定向到指定頁面，如 /unauthorized。
• app 資料夾中新增 unauthorized 資料夾，用於存放未授權訪問的提醒頁面（page.tsx）；app 資料夾中新增 dashboard 資料夾及頁面（page.tsx），用以測試當未授權身份訪問時的處理流程。

程式碼

非 admin 用戶嘗試訪問 Dashboard 頁面時，將被重定向到未授權訪問提醒頁

單元重點

• 設定 middleware 針對特定路由進行使用者認證，並進行身分檢查。
• 建立 unauthorized 及 dashboard 路徑內容。

參考資料

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

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