快捷導(dǎo)航

前端防止用戶重復(fù)提交表單的4種可靠方案(附防坑指南)

更新時間：2026年06月05日 10:48:31 作者：前端Hardy

防重提交不只是禁用按鈕,需前后端協(xié)同解決電商下單、用戶注冊、支付發(fā)起等關(guān)鍵場景的重復(fù)提交問題,這篇文章主要介紹了前端防止用戶重復(fù)提交表單的4種可靠方案,文中還有一些防坑指南,有需要的朋友可以參考下

方案一：提交時禁用按鈕（基礎(chǔ)但必要）

最直觀的做法：點擊后立即禁用提交按鈕。

const submitBtn = document.getElementById('submit-btn');
const form = document.getElementById('my-form');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  
  if (submitBtn.disabled) return; // 防止多次觸發(fā)
  
  submitBtn.disabled = true;
  submitBtn.textContent = '提交中...';

  fetch('/api/submit', { method: 'POST', body: new FormData(form) })
    .then(res => res.json())
    .then(data => {
      alert('提交成功！');
    })
    .catch(err => {
      alert('提交失敗，請重試');
    })
    .finally(() => {
      submitBtn.disabled = false;
      submitBtn.textContent = '提交';
    });
});

優(yōu)點：簡單、直觀、提升 UX。

致命缺陷：

用戶刷新頁面后狀態(tài)丟失；
無法阻止通過腳本、Postman 等繞過 UI 的重復(fù)請求；
僅靠前端，防不住！

結(jié)論：這是必備的第一道防線，但絕不能是唯一防線。

方案二：使用防重 Token（推薦！前后端協(xié)同）

這才是企業(yè)級應(yīng)用的標(biāo)準(zhǔn)做法。

原理：

頁面加載時，后端生成一個一次性 token（如 UUID），并存入 Session 或 Redis；
前端在表單中攜帶該 token 提交；
后端收到請求后：
- 檢查 token 是否存在且未使用；
- 若有效，則標(biāo)記為“已使用”并處理業(yè)務(wù)；
- 若無效或已用過，直接拒絕。

<!-- 表單中隱藏 token -->
<input type="hidden" name="antiReplayToken" value="a1b2c3d4-5678-90ef..." />

// 提交時無需額外處理，token 隨表單自動發(fā)送

優(yōu)勢：

即使用戶刷新、多開標(biāo)簽頁，每個 token 只能用一次；
能防御腳本刷接口、自動化工具攻擊；
與業(yè)務(wù)解耦，通用性強(qiáng)。

注意：

Token 必須有時效性（如 5 分鐘過期）；
必須由后端生成和校驗，前端不可偽造。

方案三：前端加鎖 + 請求去重（適用于 API 場景）

如果你調(diào)用的是無表單的 API（如點擊“領(lǐng)取優(yōu)惠券”按鈕），可用“請求指紋”去重。

const pendingRequests = new Set();

function requestWithDedup(key, apiCall) {
  if (pendingRequests.has(key)) {
    console.log('請求正在進(jìn)行，忽略重復(fù)');
    return Promise.reject('Duplicate request');
  }

  pendingRequests.add(key);
  return apiCall().finally(() => {
    pendingRequests.delete(key);
  });
}

// 使用示例
document.getElementById('claim-btn').addEventListener('click', () => {
  const userId = 'user_123';
  requestWithDedup(`claim_${userId}`, () =>
    fetch('/api/claim-coupon', { method: 'POST' })
  );
});

適用場景：

按鈕觸發(fā)的獨立操作（非完整表單）；
需要防止同一用戶短時間內(nèi)多次觸發(fā)同一操作。

方案四：結(jié)合 loading 狀態(tài) + 全局?jǐn)r截（提升體驗）

在大型應(yīng)用中，可借助狀態(tài)管理（如 Redux、Pinia）或 Axios 攔截器統(tǒng)一處理。

// Axios 示例
let isSubmitting = false;

axios.interceptors.request.use(config => {
  if (config.url === '/api/submit-order') {
    if (isSubmitting) throw new Error('請勿重復(fù)提交');
    isSubmitting = true;
  }
  return config;
});

axios.interceptors.response.use(
  res => {
    if (res.config.url === '/api/submit-order') isSubmitting = false;
    return res;
  },
  err => {
    if (err.config?.url === '/api/submit-order') isSubmitting = false;
    return Promise.reject(err);
  }
);

這種方式適合 SPA 應(yīng)用，能覆蓋所有相關(guān)請求。

最終建議：分層防御，才是王道

層級	措施	作用
前端 UX 層	禁用按鈕 + loading 提示	阻止普通用戶誤操作
前端邏輯層	請求去重 / 狀態(tài)鎖	防止快速連點
后端安全層	防重 Token / 冪等設(shè)計	根本性防御重復(fù)提交
數(shù)據(jù)庫層	唯一索引（如訂單號）	最后一道保險