Re:Nuxt

13/20
Lesson 13

Server Middleware

伺服器中間件

中間件就像是大樓的警衛，在每一個伺服器請求到達目標之前進行攔截與處理。

1 核心概念

中間件就像是大樓的警衛。

基本設定

  • •位置：server/middleware/ 資料夾。
  • •觸發時機：在每一個伺服器請求到達目標之前。

運作邏輯

1.使用者請求 /api/data
2.Middleware 攔截：記錄「有人在 12:00 訪問了 /api/data」
3.Middleware 放行：繼續交給 /api/data 處理

寫法

寫法跟 API 完全一樣，使用 defineEventHandler。唯一的差別是檔案位置決定了它是 API (終點) 還是 Middleware (過程)。

// API 終點
server/api/hello.ts
// Middleware 過程
server/middleware/logger.ts

2 給 Claude Code 的中文指令 實作

我們要建立一個簡單的「Log 記錄器」，它會在終端機印出每一個被訪問的網址。另外，我們也要試著在回應中偷加一個自訂的 Header。

請複製以下指令給 Claude：

請幫我建立一個 Server Middleware：

  1. 建立 server/middleware/logger.ts。
  2. 使用 defineEventHandler((event) => { ... })。
  3. 在 handler 內部執行兩件事：
    • 使用 console.log 印出請求的方法與網址 (格式：[Middleware Log] New request: <Method> <URL>)。提示：可以用 event.method 和 getRequestURL(event)。
    • 使用 setResponseHeader(event, 'x-custom-header', 'Nuxt-Middleware-Learning') 來為每一個回應加上自訂標頭。
  4. 不需要回傳任何值 (除非你想攔截請求直接回傳，否則預設會繼續往下執行)。

3 驗收重點

請檢查 Claude 完成後的結果：

終端機記錄檢查 (Server Log)

  1. 回到瀏覽器，隨便點擊幾個頁面，或是重新整理。
  2. 觀察你的 VS Code 終端機 (Terminal)。
  3. 你應該會看到一排排訊息不斷跑出來：
[Middleware Log] New request: GET /api/hello
[Middleware Log] New request: GET /
結論：警衛成功攔截並記錄了所有活動。

瀏覽器 Header 檢查

  1. 打開瀏覽器開發者工具 (F12) → Network 分頁。
  2. 點擊任意一個請求（例如 localhost document 或 API request）。
  3. 查看 Response Headers (回應標頭)。
  4. 你應該要找到一行：
x-custom-header: Nuxt-Middleware-Learning
結論：你成功在全站的回應中注入了標記。

💡 架構師筆記 (Middleware 執行順序)

Server Middleware (server/middleware) vs Route Middleware (middleware/)：

Server Middleware (本課教的)：

  • 跑在後端伺服器上
  • 處理 API 請求、SSR 頁面請求
  • 是用 Nitro 引擎跑的

Route Middleware (第 14 課要教的)：

  • 跑在 Vue Router 上（通常在瀏覽器端）
  • 處理頁面切換權限（如：未登入踢回首頁）
這其實是兩樣完全不同的東西！如果你要在「API 層級」擋人，用 Server Middleware。如果你要在「頁面切換」擋人，用 Route Middleware。
13