精益盒子 POST 提交时如何避免重复提交导致数据异常？

Question

在精益盒子（LeanBox）系统中，用户快速双击提交按钮或网络延迟导致页面未及时响应时，极易触发重复 POST 请求，造成订单重复创建、库存超扣、积分重复发放等数据异常。该问题本质是前端缺乏防重机制、后端无幂等性校验，且未结合业务场景设计唯一性约束或分布式锁。典型表现包括：同一表单连续提交生成多条相同业务记录；异步请求未禁用按钮导致多次调用接口；浏览器刷新或 F5 触发历史请求重放。若仅依赖前端 `disabled` 按钮，仍可能被绕过（如调试工具启用按钮、脚本模拟请求）；若仅靠数据库唯一索引，又可能因并发窗口期导致校验失效。因此，需构建“前端拦截 + 服务端幂等 + 存储层兜底”三层防护体系，尤其需关注 LeanBox 常见的轻量级微服务架构下 Token 生成与校验的一致性问题。

Answer 1

```html

一、现象层：重复提交的典型表征与业务影响

• 用户在 LeanBox 表单页双击“提交订单”按钮，生成两条完全相同的订单记录（订单号不同，但商品、金额、用户ID、时间戳高度趋同）；
• 网络高延迟场景下，前端未收到响应即重发请求，导致库存服务连续扣减两次，引发负库存告警；
• 积分发放接口被 F5 刷新触发历史请求重放，同一笔交易累计发放双倍积分；
• 日志中出现 POST /api/v1/order/create 在毫秒级时间窗口内被同一会话（session_id 或 trace_id）调用 3 次以上；
• 数据库审计发现 order_no 字段无唯一约束，且 created_at 与 updated_at 差值小于 50ms 的多条记录共存。

二、归因层：三层失守的技术根因分析

防护层级	LeanBox 现状缺陷	失效原因
前端拦截	仅用 button.disabled = true + 简单节流	DevTools 可直接启用按钮；curl 脚本绕过 DOM 控制；SPA 路由跳转未重置状态
服务端幂等	无全局幂等 Key 校验逻辑；Token 由 Nginx 生成但未透传至后端微服务	轻量级架构中 Token 生效域不一致（如网关生成 token，但订单/库存服务各自校验缓存）
存储层兜底	仅对 user_id+order_time 建联合索引，未覆盖业务语义唯一键	并发写入时 MySQL 的唯一索引校验存在「检查-插入」窗口期（TOCTOU），尤其在分库分表场景下更显著

三、设计层：面向 LeanBox 架构的三层协同防重体系

以下为推荐落地方案，兼顾轻量性与强一致性：

1. 前端拦截增强：采用「指令式防重」+「路由级锁」。Vue 3 中封装 v-prevent-re-submit 指令，自动绑定 loading 状态、禁用按钮、监听 beforeunload 防刷新重发；
2. 服务端幂等中枢：引入 Idempotency-Key HTTP Header（RFC 9112 扩展），由 API 网关统一分配并注入 Redis（TTL=24h），各微服务通过 Spring Cloud Gateway 的 GlobalFilter 校验；
3. 存储层兜底强化：在订单表增加 idempotency_token VARCHAR(64) UNIQUE 字段，且该字段由业务主键（如 user_id:goods_id:amount:timestamp_ms）经 SHA-256 生成，确保语义唯一性。

四、实现层：LeanBox 微服务幂等 Token 一致性保障关键代码

// LeanBox 网关层（Spring Cloud Gateway）Token 注入逻辑
@Bean
public GlobalFilter idempotencyTokenFilter() {
    return (exchange, chain) -> {
        String token = UUID.randomUUID().toString().replace("-", "");
        ServerHttpRequest request = exchange.getRequest()
            .mutate()
            .header("Idempotency-Key", token)
            .build();
        // 同步写入 Redis：key=idempotency:{token}, value=INIT, expire=86400
        redisTemplate.opsForValue().set("idempotency:" + token, "INIT", Duration.ofSeconds(86400));
        return chain.filter(exchange.mutate().request(request).build());
    };
}

五、验证层：全链路压测与异常注入验证流程

graph TD
    A[模拟双击/刷新/F5] --> B{前端 v-prevent-re-submit}
    B -->|拦截成功| C[请求丢弃]
    B -->|漏放行| D[携带 Idempotency-Key 请求]
    D --> E[网关校验 Redis token 是否存在]
    E -->|已存在| F[返回 409 Conflict]
    E -->|不存在| G[执行业务逻辑 + 写入 token=PROCESSED]
    G --> H[DB 插入时触发 idempotency_token UNIQUE 约束]
    H -->|冲突| I[回滚事务，抛 DuplicateKeyException]

```