ruoyi-vue防止表单重复提交
时间: 2025-05-09 08:57:34 AIGC 浏览: 34
### 防止RuoYi-Vue项目中表单重复提交的方法
#### 使用`RepeatSubmit`中间件防止重复提交
为了有效阻止同一用户短时间内多次发送相同的请求,在 RuoYi-Vue 中可以采用 `RepeatSubmit` 中间件来处理这个问题。该机制通过拦截器的方式捕获所有的HTTP POST/PUT 请求,检查这些请求是否属于重复提交的行为[^1]。
当检测到潜在的重复提交行为时,系统会自动拒绝后续的相同请求并返回相应的错误提示给客户端。具体来说:
- **时间窗口控制**:定义一个合理的时间间隔(例如5秒),在此期间不允许再次发起完全一致的操作。
- **唯一标识符生成**:对于每一个待处理的数据对象创建唯一的签名字符串,通常可以通过组合业务逻辑中的关键字段值来构建此ID。
- **缓存存储策略**:利用Redis或其他内存数据库保存已发生的操作记录及其对应的过期时间戳,以便快速查询对比新来的请求是否存在冲突情况。
```javascript
// 示例代码展示如何配置axios实例以启用防抖功能
import axios from 'axios';
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
});
let pendingRequests = new Map();
instance.interceptors.request.use((config) => {
const { method, url } = config;
if (method === "POST" || method === "PUT") {
let key = `${url}-${JSON.stringify(config.data)}-${Date.now()}`;
if (!pendingRequests.has(key)) {
// 将当前请求加入等待队列,并设置定时器清除它
pendingRequests.set(key);
setTimeout(() => pendingRequests.delete(key), 5000); // 设置5秒钟的有效期
return config; // 继续执行正常流程
}
throw new Error('请勿频繁点击');
}
return config;
}, error => Promise.reject(error));
export default instance;
```
上述方法能够有效地减少因网络延迟等原因造成的意外二次提交现象发生几率,同时也提高了用户体验感和系统的稳定性。
阅读全文
相关推荐



















