Re:Nuxt

14/20
Lesson 14

Middleware (Route Guards)

路由守衛

本章將學習 Nuxt 的路由中間件系統，建立頁面級別的權限控制機制。

1 核心概念 基礎理論

Nuxt 的路由中間件 (Route Middleware) 是基於 Vue Router 的導航守衛。它們在「換頁之前」執行。

三種等級的中間件

1. 匿名 (Inline)

直接寫在頁面的 definePageMeta 裡（適合超簡單邏輯）。

2. 具名 (Named)

放在 middleware/ 資料夾，檔名即名稱（例如 auth.ts）。需要在頁面中明確指定 middleware: 'auth' 才會生效。

3. 全域 (Global)

檔名加上 .global 後綴（例如 auth.global.ts）。每一頁都會自動執行，不用指定。

核心指令：

• navigateTo('/login')：把使用者踢到別頁

• abortNavigation()：留在原地，不讓過去

2 給 Claude Code 的中文指令 實作練習

我們要製作一個簡單的「假登入驗證」系統：

  • • 一個 auth 中間件：檢查有無登入，沒登入就踢去登入頁
  • • 一個 dashboard 頁面：套用這個中間件（受保護頁面）
  • • 一個 login 頁面：讓使用者點擊登入

請幫我建立路由守衛 (Route Middleware) 系統：

  1. 建立 app/middleware/auth.ts：
    • 使用 defineNuxtRouteMiddleware((to, from) => { ... })。
    • 內部邏輯：使用 useState('isLoggedIn') 取得登入狀態（如果沒有值預設為 false）。
    • 判斷：如果 isLoggedIn 為 false，則回傳 return navigateTo('/login')。
  2. 建立受保護頁面 app/pages/dashboard.vue：
    • 顯示文字「歡迎來到會員中心 (Dashboard)！」。
    • 在 <script setup> 中使用 definePageMeta({ middleware: 'auth' }) 來套用剛剛寫的守衛。
  3. 建立登入頁面 app/pages/login.vue：
    • 顯示文字「請先登入」。
    • 加入一個按鈕「模擬登入」。
    • 點擊按鈕時：設定 useState('isLoggedIn').value = true，然後執行 navigateTo('/dashboard')。
  4. 修改首頁 app/pages/index.vue，加入連往 /dashboard 的連結。

3 驗收重點

請依照以下劇本進行測試：

攔截測試（未登入）：

  1. 重新整理瀏覽器（確保狀態重置）
  2. 在首頁點擊 /dashboard 連結
  3. 預期結果：網址瞬間變成 /login，畫面顯示「請先登入」

登入流程測試：

  1. 在登入頁點擊「模擬登入」按鈕
  2. 預期結果：網址變成 /dashboard，畫面顯示「歡迎來到會員中心」

直接訪問測試（SSR）：

  1. 在網址列直接輸入 http://localhost:3000/dashboard 然後按 Enter
  2. 預期結果：因為伺服器端渲染時 useState 預設是 false，你應該會被伺服器端轉址到 /login

💡 架構師筆記

這是面試必考題，請務必分清楚 Server Middleware 與 Route Middleware 的差異：

特性Server Middleware (L13)Route Middleware (L14)
位置server/middleware/app/middleware/
執行引擎Nitro（後端）Vue Router（前端 + SSR）
控制對象API 請求、HTML 請求頁面切換
用途Log、Header、API 驗證權限檢查、頁面轉導
14