javascript - 如何防止从表单多次发送登录请求

Question

在我的登录表单中，我有一个这样的方法:

     [HttpPost]
        [ValidateAntiForgeryToken]
        [AllowAnonymous]
        public async Task<ActionResult> Login(LoginModel model, string returnUrl)
{

var result = await _applicationSignInManager.PasswordSignInAsyncResponse(someParamshereToPass);

// ... 
}

问题是在进行登录检查时需要时间，用户可以双击提交按钮并再次调用此方法，虽然用户现在已经通过身份验证，但它会尝试为他创建另一个 token ，这会导致下面的崩溃:

The provided anti-forgery token was meant for a different claims-based user than the current user.

我确实查找了防止双击表单的答案，但无法使它们正常工作，其中大多数解决方案是禁用按钮!好吧，如果他们输入的密码错误，如何启用它!!还有一些是我不知道如何使用的 Ajax。

所以理想情况下，我正在寻找一个服务器端解决方案，如果没有，那么一个 JS 解决方案。如果没有，那么可以使用 Ajax 解决方案!

Answer 1

您可以在单击按钮后将其禁用。

唯一的问题是，如果您使用 ASP.Net MVC 客户端验证，您希望仅在客户端验证成功后禁用它。 否则，如果用户在没有输入任何内容的情况下单击按钮，按钮将永远禁用。

@using (Html.BeginForm("Login", "Account",
   new { ReturnUrl = ViewBag.ReturnUrl },
   FormMethod.Post, new {  role = "form", autocomplete = "off" }))
{
   @Html.AntiForgeryToken()
   ...
   <div class="form-group">
     <button id="btnSubmit" type="submit" value="Sign In" 
         class="btn btn-primary btn-block">Sign In</button>
   </div>
}

<script type="text/javascript">
    $(function () {    
        $("form").data("validator").settings.submitHandler = function (form) {
            $("#btnSubmit").html("<i class=\"fa fa-spinner fa-pulse\"></i> Signing In...").prop('disabled', true);
            form.submit();
        };
    });
</script>