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