PHP + AJAX 登入驗證與頁面跳轉完整實作指南

前言

在現代 Web 應用中，使用者登入流程通常採用前後端分離的模式：前端透過 AJAX 發送帳號密碼，後端驗證並建立 Session，前端再根據回應決定是否跳轉。本文將詳細拆解這一經典流程的實作邏輯與程式碼範例。

核心流程圖解

1. 前端收集使用者輸入的帳號與密碼，透過 AJAX POST 請求送往後端 API。
2. 後端接收參數，查詢資料庫比對密碼雜湊值。
3. 驗證失敗：回傳 JSON 狀態碼 status: -1 及錯誤訊息，前端清空密碼欄位並提示重新輸入。
4. 驗證成功：在 Session 中寫入唯一識別碼（如 UUID），回傳 status: 0 代表成功。
5. 前端收到成功回應，執行 window.location.href 跳轉至目標頁面（如首頁）。
6. 目標頁面載入時，後端模板引擎檢查 Session 中是否存在 UUID，決定顯示「登入按鈕」或「使用者頭像/暱稱」。

關鍵程式碼範例

後端驗證邏輯（PHP）

// 伪代码示例
$username = $_POST['username'];
$password = $_POST['password'];
$user = $db->query("SELECT * FROM users WHERE username = ?", [$username]);
if ($user && password_verify($password, $user['password_hash'])) {
    $_SESSION['uuid'] = uniqid('user_', true);
    echo json_encode(['status' => 0, 'msg' => 'success']);
} else {
    echo json_encode(['status' => -1, 'msg' => '用戶名或密碼不正確']);
}

前端 AJAX 處理（JavaScript）

$.ajax({
    url: '/api/login',
    type: 'POST',
    data: { username: $('#username').val(), password: $('#password').val() },
    dataType: 'json',
    success: function(res) {
        if (res.status === 0) {
            window.location.href = '/'; // 跳轉首頁
        } else {
            $('#password').val(''); // 清空密碼
            alert(res.msg);
        }
    }
});

頁面模板判斷登入狀態（PHP）

<nav>
    <?php if (isset($_SESSION['uuid']) && !empty($_SESSION['uuid'])): ?>
        <!-- 已登入：顯示使用者資訊 -->
        <a href="#"><?= htmlspecialchars($_SESSION['nickname']) ?></a>
    <?php else: ?>
        <!-- 未登入：顯示登入按鈕 -->
        <input type="button" value="登入" />
    <?php endif; ?>
</nav>

安全性補充建議

• 密碼務必使用 password_hash() / password_verify() 處理，不可明文儲存。
• AES/HTTPS 傳輸加密，防止中間人攻擊。
• Session ID 設定 HttpOnly、Secure、SameSite 屬性。
• 實作 CSRF Token 驗證，防止跨站請求偽造。
• 登入失敗次數限制與帳號鎖定機制，防暴力破解。

總結

掌握「AJAX 非同步驗證 + Session 狀態管理 + 前端跳轉」這套經典模式，能快速建構安全且使用者體驗良好的登入系統。實務上可搭配 JWT、OAuth 2.0 等現代認證方案，依專案需求彈性擴充。