今天終於把第四天學的Middleware用在刀口上。

今天做的事
新增middleware/auth.js，從請求標頭Authorization: Bearer ... 取出token驗證，通過才呼叫next()：

try {
  req.user = jwt.verify(token, JWT_SECRET);
  next();
} catch (e) {
  res.status(401).json({ message: '登入已過期，請重新登入' });
}

在server.js把待辦事項的路由掛在這個Middleware後面：app.use('/api/todos', auth, todosRouter)。登入和註冊的路由不能擋，不然沒人進得來。
前端把所有fetch集中包成一個api()函式，自動帶上token，收到401 就清掉登入資料、導回登入頁。

觀察

• 不帶token打 /api/todos，收到401；帶上正確的token才是200
• 驗證成功後把使用者資料掛在req.user，後面的路由就能直接拿到是誰在操作
• 把token的處理集中在api()一個地方，之後要改只需要改一處

卡關
用 Thunder Client 測試時，我一度不確定Authorization: Bearer你的token 是不是要照字面輸入。後來才搞清楚，要貼的是登入時拿到的那一整串真正的token，Bearer跟token中間還要有一個空格。另外專案裡出現了兩個auth.js（routes/ 和 middleware/ 各一個），一開始差點放錯資料夾。

心得
Middleware 沒通過就不呼叫 next()這個概念，在第四天只是練習，今天才真正理解它的用途：在請求進到路由之前，先把關。