订单提交成功跳回列表,用户按浏览器后退,确认框弹出来点了确定,后台多了一条一模一样的订单。乍看像缓存或者权限的锅,追下去往往不是。

await api.submit(data)
router.replace({ name: 'orderList' })

追下去是这么回事:后退恢复的是那个 POST 请求的页面,浏览器会提示重新提交表单。confirm 只是提示用户,拦不住这一次重发。

碰到「后退重复提交」这类问题,我习惯先把当前配置原样备份一份,改坏了立刻换回来,不用现场推。一次只改一处,改完立刻验证,几个改动叠在一起,出问题就说不清是谁导致的。

先做最小复现,能稳定跑出来的问题,排查成本会低一个数量级。别只看报错的最后一行,往上看几行,真正的起因通常在上面。

具体做法是,提交成功后用 replace 跳转,把 POST 那一页从历史里换掉;服务端加幂等键,同一单号重复提交直接返回上次结果;表单页进入时判断有没有完成标记,有就跳走。

验收就看一点,提交后按后退不再弹重提提示,后台订单只有一条。

作者 9823189