JavaScript 禁止瀏覽器後退鍵：兩種常用方案與缺陷

場景：登入後不想讓用戶後退回登入頁

方案一：history.forward 強制前進

// 在需保護的頁面腳本最前面
window.history.forward(1);
// 或
setTimeout(() => window.history.forward(), 0);

• 原理：用戶按後退 → 瀏覽器回上頁 → 立即執行 forward 回當前頁。
• 缺點：用戶可感知閃爍，部分瀏覽器攔截，體驗差。

方案二：location.replace 替換歷史記錄

// 登入成功後跳轉
location.replace('/home'); // 不會在 history 堆疊留下登入頁
// 或重新載入
location.reload(true); // 強制從伺服器重新載入

• 原理：replace 用新 URL 替換當前歷史條目，無法後退回上一條。
• 優點：徹底斷開後退路徑，無閃爍。
• 缺點：用戶也無法後退回上一業務頁（如商品列表），需評估業務接受度。

現代最佳實踐：History API + 狀態管理

// 登入成功
history.pushState({auth: true}, '', '/home');

// 監聽 popstate
window.addEventListener('popstate', e => {
    if (!e.state?.auth) {
        history.pushState({auth: true}, '', '/home'); // 強制推回
        // 或導向登入頁
    }
});

對比總結

建議：**登入流程用 location.replace**，單頁應用結合 History API 狀態管理。