WebApi后台与前端如何防止请求重复提交

一、前言

记录下WebApi如何防止重复提交，主要使用过滤器加上内存缓存进行处理。

二、.Net Core WebApi参考版

1. 操作过滤器代码

/// <summary>
/// action方法过滤器
/// </summary>
public class PlatformActionFilter : Attribute, IActionFilter
{
    private static MemoryCache cache = new MemoryCache(new MemoryCacheOptions());
    public const string hiddenToken = "hiddenToken";
    private ILog _log;
 
    public PlatformActionFilter()
    {
        this._log = LogManager.GetLogger(Startup.Repository.Name, typeof(PlatformActionFilter));
    }
 
    public void OnActionExecuted(ActionExecutedContext context)
    {
 
    }
    /// <summary>
    /// action 执行之前
    /// </summary>
    /// <param name="context"></param>
    public virtual void OnActionExecuting(ActionExecutingContext filterContext)
    {
        string httpMethod = WebUtility.HtmlEncode(filterContext.HttpContext.Request.Method);
        if (httpMethod == "POST")
        {
            //使用请求路径作为唯一key
            string path = filterContext.HttpContext.Request.Path;
            string cacheToken = $"{hiddenToken}_{path}";
            string keyValue = new Guid().ToString() + DateTime.Now.Ticks;
 
            if (path != null)
            {
                //var cache = iZen.Utils.Core.iCache.CacheManager.GetCacheValue(cacheToken);
                var cv = cache.Get(cacheToken);
                if (cv == null)
                {
                    //iZen.Utils.Core.iCache.CacheManager.SetChacheValueSeconds(cacheToken, keyValue, 1);
                    //设置缓存1秒过期
                    cache.Set(cacheToken, keyValue, new MemoryCacheEntryOptions() { SlidingExpiration = TimeSpan.FromSeconds(1) });
                    _log.Info($"提交成功");
                }
                else
                {
                    _log.Error($"{filterContext.HttpContext.Request.Method},请不要重复提交");
                    //设置了 filterContext.Result 表示返回过滤失败的结果
                    //filterContext.Result = new BadRequestObjectResult(filterContext.ModelState);
                    filterContext.Result = new BadRequestObjectResult("请不要重复提交");
                }
 
            }
            return;
        }
        this.OnActionExecuting(filterContext);
    }
}

2. 在Controller类或Action方法上添加过滤器特性

/// <summary>
/// 测试重复提交过滤器
/// </summary>
/// <returns></returns>
[PlatformActionFilter]
[HttpPost]
public JsonResult TestPost()
{
    var result = new ResultModel() { IsSuccess = true, Info = "测试重复提交" };
    return Json(result);
}

3. 点评
   上面这个过滤器局限性很大，仅供参考，针对同路径的不同参数的请求，会出现错误阻止。

转载自：https://blog.csdn.net/weixin_30679823/article/details/99400588

三、.Net MVC5 WebApi参考版，旧的项目用到，自己写的

1. 操作过滤器代码，使用了MD5来判断同一请求

public class PreventDuplicateSubmitAttribute : ActionFilterAttribute
{
    //使用内存缓存
    private static Cache _cache = new Cache();

    /// <summary>
    /// 操作方法执行前
    /// </summary>
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        string httpMethod = filterContext.HttpContext.Request.HttpMethod;
        //string httpMethod2 = WebUtility.HtmlEncode(filterContext.HttpContext.Request.HttpMethod);
        string path = filterContext.HttpContext.Request.Path;
        if (httpMethod == "POST" && !string.IsNullOrEmpty(path))
        {
            //使用请求的路径作为唯一key
            //var requestParams = filterContext.HttpContext.Request.Params;
            var qsCol = filterContext.HttpContext.Request.QueryString;
            var formCol = filterContext.HttpContext.Request.Form;
            string requestParamsStr = path + "|" + (qsCol?.ToString() ?? "") + "|" + (formCol?.ToString() ?? "");
            //计算参数MD5
            string md5 = FangsCustomUtility.GetMd5Hash(requestParamsStr) + FangsCustomUtility.GetMd5Hash(requestParamsStr);
            string cacheToken = md5;
            string keyValue = DateTime.Now.Ticks.ToString();
            var oldValue = _cache.Get(cacheToken);
            if (oldValue == null)
            {
                //设置缓存项3秒后过期，add方法不知为何设置不了过期时间
                //var addResult = _cache.Add(curApiUrlToken, keyValue, null, DateTime.Now.AddSeconds(10),
                //    Cache.NoSlidingExpiration, CacheItemPriority.Default, null);
                _cache.Insert(cacheToken, keyValue, null, DateTime.Now.AddSeconds(3), Cache.NoSlidingExpiration);
            }
            else
            {
                filterContext.Result = new HttpStatusCodeResult(HttpStatusCode.BadRequest, null);
            }
        }
        base.OnActionExecuting(filterContext);
    }
}

2. 在Controller类或Action方法上添加过滤器特性

3. MD5摘要算法，获取字符串的MD5值

public static string GetMd5Hash(string input)
{
    // Create a new instance of the MD5CryptoServiceProvider object.
    MD5CryptoServiceProvider md5Hasher = new MD5CryptoServiceProvider();

    // Convert the input string to a byte array and compute the hash.
    byte[] data = md5Hasher.ComputeHash(Encoding.Default.GetBytes(input));

    // Create a new Stringbuilder to collect the bytes
    // and create a string.
    StringBuilder sBuilder = new StringBuilder();

    // Loop through each byte of the hashed data 
    // and format each one as a hexadecimal string.
    for (int i = 0; i < data.Length; i++)
    {
        sBuilder.Append(data[i].ToString("x2"));
    }

    // Return the hexadecimal string.
    return sBuilder.ToString();
}

参考自：https://www.cnblogs.com/tongyi/p/4274092.html

四、前端也应该防止重复提交，叫做“防抖”与“节流”

• 防抖（debounce），定义：如果一个函数持续地触发，那么只在它结束后过一段时间只执行一次。(适合于输入事件)

• 节流（throttle），定义：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。（第一下点击就能生效，适合于点击事件）

我们可以使用Lodash的debounce方法，进行防抖，throttle方法，进行节流。
参考教程：https://www.jianshu.com/p/743846e72a05
https://www.cnblogs.com/momo798/p/9177767.html