今天是鐵人賽 Day17，目標是完成 React 前端註冊與登入頁面，並將 JWT 儲存到 localStorage，讓前端可以呼叫受保護 API。

1️⃣ 註冊頁面 (Register.jsx)
使用者可以輸入 帳號、信箱、密碼 完成註冊，送出表單後呼叫後端 /api/auth/register API，成功會顯示「註冊成功」，失敗則顯示錯誤訊息（例如帳號或信箱已被註冊）。

<form onSubmit={handleSubmit}>
  <input type="text" name="username" value={formData.username} onChange={handleChange} placeholder="帳號" required />
  <input type="email" name="email" value={formData.email} onChange={handleChange} placeholder="信箱" required />
  <input type="password" name="password" value={formData.password} onChange={handleChange} placeholder="密碼" required />
  <button type="submit">註冊</button>
</form>

2️⃣ 登入頁面 (Login.jsx)
使用者輸入 信箱 + 密碼 登入，登入成功後取得 JWT token 與使用者資訊，並存入 localStorage。登入成功會導向不同頁面：
role === "admin" → /admin
role === "user" → /user

const handleSubmit = async (e) => {
  e.preventDefault();
  const res = await axios.post("/api/auth/login", formData);
  setToken(res.data.token); // 存入 localStorage
  setUser(res.data.user);   // 存入 localStorage
  if (res.data.user.role === "admin") navigate("/admin");
  else navigate("/user");
};

3️⃣ JWT 儲存與使用

已透過 utils/auth.js 封裝方法管理 token 與 user 資訊
未來可使用這個 token 呼叫後端受保護 API，例如取得會員資料或新增商品

export const setToken = (token) => localStorage.setItem("token", token);
export const getToken = () => localStorage.getItem("token");
export const setUser = (user) => localStorage.setItem("user", JSON.stringify(user));
export const getUser = () => JSON.parse(localStorage.getItem("user"));

4️⃣ 前端測試流程
註冊 → 顯示成功訊息
登入 → 取得 token，導向對應頁面
localStorage 可查看 token 與 user 資訊是否正確存入

🐛 遇到的問題與解決
表單驗證：加入 required 及前端訊息提示
JWT 存取：封裝 utils 方法統一管理 token 與 user
導向不同頁面：透過 role 判斷使用者身份

💡 Day17 收穫

• 完成前端註冊與登入頁面
• JWT 成功存入 localStorage，可用於後續 API 呼叫
• 前端登入成功可導向不同頁面（admin/user）
• 前端表單驗證與訊息提示已建立