倒计时+按钮禁用+后端幂等校验协同实现防重：前端禁用按钮从源头阻断重复点击，后端通过redis缓存请求标识（如md5(phone+timestamp_floor_60s)）校验时间窗口内唯一性，vue3可叠加v-click-once指令优化提交环节体验。
验证码倒计时本身不带 once 参数，但“防止暴力重复点击”的目标，可以通过倒计时 + 按钮禁用 + 后端幂等校验三者协同实现。前端倒计时只是第一道防线，关键在于它如何与防重逻辑配合——不是靠某个 magic 参数，而是靠状态控制和机制设计。
倒计时即天然防重：禁用按钮是核心动作
用户点击「获取验证码」后，必须立刻做两件事：
- 启动倒计时（如 60 秒），并用
useState或响应式变量记录剩余时间 - 同步设置按钮
disabled=true，同时替换文案为“60s后重发”
这个禁用状态就是最直接的 once 效果：只要倒计时没结束，按钮物理不可点，从源头阻断连续点击。不需要额外加 once 属性，DOM 层已拦截。
后端必须配套幂等控制：前端禁用≠绝对安全
仅靠前端倒计时不能防绕过（比如开发者工具删掉 disabled、用 Postman 手动发请求）。所以后端要：
- 对每个手机号/邮箱 + 时间窗口（如 60 秒）生成唯一请求标识（例如
md5(phone + timestamp_floor_60s)） - 在 Redis 中缓存该标识，TTL 设为 60 秒；每次请求先查缓存，存在则拒绝，不存在才发码并写入
- 返回明确错误码（如
429 Too Many Requests），前端可据此提示“请勿频繁操作”
结合 Vue3 的 clickOnce 指令增强体验
如果你用的是 Vue3，可以叠加 v-click-once 指令来加固表单提交环节（比如验证码输入后的「登录」按钮）：
- 它在 1.5 秒内自动节流，防止手抖连点
- 点击后立即禁用按钮 + 显示 loading 图标，视觉反馈清晰
- 若调用的是异步接口（如
loginApi()），Promise 完成后自动恢复按钮，无需手动管理 loading 状态
注意：它不替代倒计时，而是和倒计时分工——倒计时管「获取验证码」按钮，clickOnce 管「提交验证」按钮。
避免常见坑：定时器未清理、状态不同步
倒计时容易出问题的地方集中在生命周期管理：
- 页面跳转或组件卸载时，必须清除
setInterval，否则倒计时还在后台跑，可能触发已销毁组件的 setState，报错或内存泄漏 - 多个倒计时共存时（如两个手机号输入框），确保每个倒计时有独立状态变量，不要共用同一个
countdown - 后端发码失败（如短信通道满），应主动重置倒计时状态，否则按钮将长期锁定，用户无法重试
