如何防止表单数据重复提交

背景

有时候我们希望避免表单重复提交，比如网络慢，点击页面提交按钮后无反应，用户重复多次点击导致多次提交请求给后端接口。

注意以下的实践是基于前后端分离的开发，并且后端接口是不管session会话的无状态服务器的接口。

如何防重复提交

前端措施

前端可以在点击按钮后进入一段时间的loading，让按钮在loading期间不可再次点击。

loading的时长可以直到后端接口返回，也可以自己定义一个较短的时间，比如2秒。

后端措施

情况一

这种情况适用于提交的表单数据有一个比较唯一的标识，比如 “名字”。后续会解释为什么这种方案需要这个 “名字”。

伪代码

// 存在此key返回false，timeout设置成较短时间，如2秒
String key = userId + 名字;
if (!redis.setIfAbsent(key, timeout)) {
    throw new RuntimeException("请勿重复提交");
}

// 执行保存表单数据的逻辑

• 上述逻辑能够避免同一个用户在2秒内提交相同名字的数据。
• 因为key有userId，即使 “名字” 相同也仅仅影响当前用户
• 注意 redis.setIfAbsent(key, timeout) 要保证原子性，可以用lua脚本保证
• 在这个例子里，“名字” 就是比较唯一的标识，“比较唯一” 的意思是可以重复但是不经常重复。

比如说保存一篇文章的表单数据，这里的 “名字” 就可以是文章的标题。如果提交的表单没有比较唯一的字段，比如下一个商品的订单，那就不太适用于这种方案来避免表单重复提交。

• 思考：为什么没有比较唯一的名字就不太适合?
  因为 “没有比较唯一的名字” 的时候比较难标识这是用户重复提交的数据，“比较唯一” 就是说平时差异度还是比较大的，能避免误杀。

情况二

没有比较唯一的名字的情况，如何避免表单重复提交?

在进入表单填写页面之前，前端调用后端接口，后端生成uuid并将该uuid作为key写入redis中，并将该uuid返回给前端。

当提交表单的时候前端把表单数据、该uuid一并传给后端接口，后端接口比对redis中是否存在该uuid的key，存在则删除key并执行保存表单的逻辑；不存在则提示"请勿重复提交表单"。

写入到redis的uuid的key，可以设置超时时间，比如一天时间。

• 有个细节：如果用户进入表单填写页，得到uuid，在超过一天后用户再首次提交表单信息，这时候后端的该key已经超时消失了，这时还提醒 “请勿重复提交表单” 似乎不太准确，可以将文案改成 “请勿重复提交表单，或页面已过时请重新刷新”