有效防止重复提交的六个方法

原创于 2025-10-16 16:30:13 发布 · 838 阅读

CC 4.0 BY-SA版权

文章标签：

重复提交是开发中经常遇到的问题。用户可能因为页面响应慢连续点击提交按钮，或者网络延迟时反复重试。这些情况会导致数据重复、业务混乱，比如生成重复订单、多次扣款等问题。最重要的是，不要完全依赖前端的防护，后端必须要有相应的验证机制。这样才能确保系统的数据安全和业务稳定。

重复提交是开发中经常遇到的问题。用户可能因为页面响应慢连续点击提交按钮，或者网络延迟时反复重试。这些情况会导致数据重复、业务混乱，比如生成重复订单、多次扣款等问题。

防止重复提交需要前后端配合。前端主要提升用户体验，后端才是真正的保障。

前端防止重复提交

前端方法能防止用户误操作，但不能完全依赖，因为可以通过工具绕过前端验证。

1. 按钮禁用

提交后立即禁用按钮，这是最直接的方法。

functionsubmitForm() {
const btn = document.getElementById('submitBtn');

// 如果按钮已禁用，直接返回
if (btn.disabled) return;

// 禁用按钮并改变文字
    btn.disabled = true;
    btn.textContent = '提交中...';

// 发送请求
    fetch('/api/submit', {
method: 'POST',
body: JSON.stringify(formData)
    })
    .then(response => response.json())
    .then(data => {
// 处理响应
    })
    .catch(error => {
console.error('Error:', error);
    })
    .finally(() => {
// 无论成功失败，都重新启用按钮
        btn.disabled = false;
        btn.textContent = '提交';
    });
}

2. 防抖函数

控制按钮在指定时间内只能点击一次。

functiondebounce(func, wait) {
let timeout;
returnfunction() {
const context = this;
const args = arguments;

clearTimeout(timeout);
        timeout = setTimeout(() => {
            func.apply(context, args);
        }, wait);
    };
}

// 使用示例
const submitForm = debounce(function() {
// 实际的提交逻辑
}, 1000); // 1秒内只能点击一次

3. 请求拦截

记录正在处理的请求，发现重复请求直接拦截。

classRequestManager{
constructor() {
this.pendingRequests = newMap();
    }

    generateKey(config) {
return`${config.method}-${config.url}-${JSON.stringify(config.data)}`;
    }

    addRequest(config) {
const key = this.generateKey(config);
if (this.pendingRequests.has(key)) {
returnfalse;
        }
this.pendingRequests.set(key, true);
returntrue;
    }

    removeRequest(config) {
const key = this.generateKey(config);
this.pendingRequests.delete(key);
    }
}

// 在axios拦截器中使用
const requestManager = new RequestManager();

axios.interceptors.request.use(config => {
if (!requestManager.addRequest(config)) {
returnPromise.reject(newError('请求已处理中'));
    }
return config;
});

axios.interceptors.response.use(response => {
    requestManager.removeRequest(response.config);
return response;
}, error => {
if (error.config) {
        requestManager.removeRequest(error.config);
    }
returnPromise.reject(error);
});

前端方法的优点是提升用户体验，缺点是可以被绕过。因此后端验证是必须的。

后端防止重复提交

4. Token令牌机制

这是比较传统但有效的方法，适合表单提交场景。

工作流程：

用户访问页面时，后端生成唯一Token
Token随页面返回给前端
提交表单时携带Token
后端验证Token有效性
验证成功后立即删除Token

Java实现示例：

@Component
publicclassTokenService{

// 生成Token
publicString createToken(HttpServletRequest request) {
String token = UUID.randomUUID().toString();
// 存储到Session中
        request.getSession().setAttribute("FORM_TOKEN", token);
return token;
    }

// 验证Token
publicboolean verifyToken(HttpServletRequest request) {
String clientToken = request.getParameter("token");
if (clientToken == null) {
returnfalse;
        }

        HttpSession session = request.getSession();
String serverToken = (String) session.getAttribute("FORM_TOKEN");

if (serverToken == null || !serverToken.equals(clientToken)) {
returnfalse;
        }

// 验证成功后立即删除
        session.removeAttribute("FORM_TOKEN");
returntrue;
    }
}

前端表单：

<formaction="/submit"method="post">
<inputtype="hidden"name="token"value="${token}">
<!-- 其他表单字段 -->
<buttontype="submit">提交</button>
</form>

5. AOP + Redis方案

适合分布式系统，利用Redis实现分布式锁。

定义注解：

@Target(ElementType.METHOD)
@Retention(RetentionPolicy.RUNTIME)
public@interface PreventDuplicate {
intexpire()default 5; // 锁定时间，默认5秒
String key()default ""; // 自定义锁key
}

实现切面：

@Aspect
@Component
publicclassDuplicateSubmitAspect{

    @Autowired
private RedisTemplate<String, String> redisTemplate;

    @Around("@annotation(preventDuplicate)")
publicObject checkDuplicate(ProceedingJoinPoint joinPoint, 
                               PreventDuplicate preventDuplicate) throws Throwable {

        HttpServletRequest request = getRequest();
String lockKey = buildLockKey(request, preventDuplicate);
int expireTime = preventDuplicate.expire();

// 尝试加锁
Boolean success = redisTemplate.opsForValue()
            .setIfAbsent(lockKey, "1", Duration.ofSeconds(expireTime));

if (!success) {
thrownewRuntimeException("请勿重复提交");
        }

try {
return joinPoint.proceed(); // 执行原方法
        } finally {
// 根据业务需求决定是否立即删除锁
// redisTemplate.delete(lockKey);
        }
    }

privateString buildLockKey(HttpServletRequest request, 
                              PreventDuplicate preventDuplicate) {
String userId = getUserId(request); // 获取用户ID
String uri = request.getRequestURI();
String params = request.getQueryString() != null ? 
                       request.getQueryString() : "";

return"submit:lock:" + userId + ":" + uri + ":" + 
               DigestUtils.md5DigestAsHex(params.getBytes());
    }

private HttpServletRequest getRequest() {
        RequestAttributes attributes = RequestContextHolder.getRequestAttributes();
        ServletRequestAttributes sra = (ServletRequestAttributes) attributes;
return sra.getRequest();
    }
}

使用方式：

@PostMapping("/order/create")
@PreventDuplicate(expire = 10)
public Result createOrder(@RequestBody OrderDTO order) {
// 业务逻辑
returnResult.success("订单创建成功");
}

6. 数据库唯一约束

对于有唯一性要求的业务，可以在数据库层面保障。

例如订单表：

CREATETABLE orders (
idBIGINT PRIMARY KEY,
    order_no VARCHAR(64) UNIQUE, -- 订单号唯一约束
    user_id BIGINT,
    amount DECIMAL(10,2),
    create_time DATETIME
);

在业务代码中处理：

@Service
publicclassOrderService{

public Result createOrder(OrderDTO order) {
try {
// 尝试插入订单
            orderMapper.insert(order);
return Result.success("创建成功");
        } catch (DuplicateKeyException e) {
// 捕获唯一约束异常
            log.warn("重复订单: {}", order.getOrderNo());
return Result.error("订单已存在");
        }
    }
}

方案对比

方案	适用场景	优点	缺点
按钮禁用	所有前端表单	用户体验好	可被绕过
Token机制	表单提交	安全可靠	分布式环境需要共享Session
AOP+Redis	分布式系统	无侵入，灵活	依赖Redis
数据库约束	有唯一性要求	绝对可靠	只能防止最终重复