Spring MVC + AJAX 登入：成功攜帶參數跳轉、失敗顯示提示框的實作模式

場景需求

登入頁使用 AJAX 提交帳密：

• 失敗 → 回傳 JSON 錯誤訊息，前端 alert() 提示。
• 成功 → 需攜帶用戶資訊（如 token、角色）跳轉至主頁，而非單純回傳 JSON 讓前端手動 location.href。

推薦架構：後端回傳 JSON 含導向資訊，前端統一處理

後端回傳格式

{
  "success": true,
  "redirectUrl": "/dashboard",
  "token": "eyJhbGciOiJIUzI1NiIs...",
  "user": { "id": 1, "name": "Admin", "roles": ["ROLE_ADMIN"] }
}

前端 AJAX 處理

$.ajax({
    url: '/login',
    type: 'POST',
    data: $('#loginForm').serialize(),
    dataType: 'json',
    success: function(resp) {
        if (resp.success) {
            // 存入 Cookie 或 localStorage
            document.cookie = "token=" + resp.token + "; path=/";
            // 攜帶參數跳轉
            window.location.href = resp.redirectUrl;
        } else {
            alert(resp.message); // 失敗提示
        }
    }
});

進階：安全性考量

• Token 建議存 HttpOnly Cookie，防 XSS。
• 敏感參數勿放 URL，改由後端從 Session/Token 解析。
• 登入成功後重定向應為 GET 請求，符合 PRG 模式避免重複提交。