今天讓使用者可以真的登入，並在瀏覽器保存登入狀態。

今天做的事
後端新增POST /api/auth/login：用帳號查出使用者，bcrypt.compare比對密碼，成功就簽發有效期7天的token：

const token = jwt.sign(
  { id: user.id, username: user.username },
  JWT_SECRET,
  { expiresIn: '7d' }
);
res.json({ token, username: user.username });

前端新增login.html，有帳號、密碼欄位和登入、註冊兩個按鈕。登入成功後，把token和使用者名稱存進localStorage，再跳回首頁。

觀察

• 帳號不存在和密碼錯誤，我讓它們回傳完全相同的訊息 帳號或密碼錯誤，這樣外人就沒辦法靠回應差異試探哪些帳號存在
• 登入成功後，在開發者工具的Application → Local Storage可以看到token和username兩筆資料
• 在密碼欄按Enter也能登入，這是補了一個keydown事件

心得
登入看起來是一個按鈕，背後其實串了密碼比對、簽發token、瀏覽器保存三件事。這時首頁還沒有保護，登入後畫面跟之前一樣，真正的攔截要等明天。