如何防止页面重复提交，经典问题之一

前言 ：

先列出部分场景需要用到防止表单重复提交的，一直该场景针对有对数据库进行修改/添加操作的请求，对查询请求也进行防止重复提交也可以起到保护链接数据库的作用。

面临场景 ：

金融项目的扣款场景，如果用户购买某支基金，在页面双击或者疯狂点击购买，按照正常的逻辑来说应该只生成一次购买请求，应该在前端/后端把它重复的请求过滤掉，
这样的场景下可以只做前端或者后端或者前后端结合的过滤，但是比如，面对电商平台购买秒杀商品的场景，用户不断的发送秒杀请求，但是最终只要生成一次用户的订单，这时就只能用后端来处理防止重复生成订单了
再比如下单寄快递，如果一个寄一个物件因为用户重复提交订单页面导致生成很多订单号这也是不合理的
总之，防止页面重复提交所对应的场景对于金融，和金钱有关的，像开发票，饭店小程序下单等很多场景，如果做不到防止重复提交那在线下使用的时候一定会出现很多棘手的问题，所以说在开发过程中前后端一起结合才能有效起到真正的防止重复提交的作用，至于为什么，具体讲解使用方式时候会再详细分析。

使用方式

第一种 ： 用户点击一次之后直接禁用页面的按钮
用Vue举个例子，只要加上disabled属性就可以禁用按钮
好处 ： 在前端可以友好的防止用户重新提交请求
坏处 ： 如果人家直接通过接口地址来访问，后端无任何措施可以处理，无法真正实现防止重复提交。。。换句话说人家直接穿过前端来攻击你，你却没有任何防备

<el-row>
  <el-button disabled>提交按钮</el-button>
</el-row>

第二种 ： 用户点击发送请求后直接重定向到另一个页面
这种用法的前提是：这个按钮完成的请求后要重定向到其他页面，不能用异步的请求来处理
这里是直接在后端返回时用重定向返回就不用代码举例展示了
好处 ：什么都不需要考虑，直接把重定向到另一个页面
坏处 ：不是每个按钮或者请求都可以做成重定向的。。。如果都可以做成重定向那异步请求如此节省性能的东西岂不是就浪费了

第三种 ：在session中存放值，服务端对session值进行校验
这种用法需要在服务器端，生成一个唯一的标识符，将它存入session域里，在发请求的时候带上这个session域里的值，然后在服务器端，获取这次请求的session中的值，与session中的唯一标识符比较，相等说明是首次提交，就处理本次请求，然后将session中的唯一标识符移除；不相等说明是重复提交，就不再处理。
好处 ：纯后端进行验证，也能有效防止重复提交
坏处 ：对session域带来了负担，如果页面中每个需要进行防止重复提交的按钮都用session域的方式进行防止重复提交，那session域的负担会非常大

第四种 ：在数据库里添加约束
在数据库里添加唯一约束或创建唯一索引，防止出现重复数据。这是最有效的防止重复提交数据的方法。
好处 ：能够准确地从数据根源上有效防止提交数据
坏处 ：发送请求到数据端了才能验证数据有无重复提交。。没有前端直接过滤或者session域校验这样的方式

第五种 ：使用Cookie处理
使用Cookie记录表单提交的记录，设置一个Cookie过期的时间。
好处 ：不用session，cookie是存储在客户端的，可以减轻开发成本和服务端的压力
坏处 ：如果客户端禁止了Cookie，该方法将不起任何作用，正因为这个缺点，几乎不用这样的方式。

总之，使用哪种方式都要有所牺牲，就看哪种方式在使用时更能接受