背景
有时候我们希望避免表单重复提交，比如网络慢，点击页面提交按钮后无反应，用户重复多次点击导致多次提交请求给后端接口。
注意以下的实践是基于前后端分离的开发，并且后端接口是不管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已经超时消失了，这时还提醒 “请勿重复提交表单” 似乎不太准确，可以将文案改成 “请勿重复提交表单，或页面已过时请重新刷新”
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/135303.html
