今天是鐵人賽 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 收穫