使用 AJAX 在 Laravel 中对 Fortify Login 进行前端验证

编程问答 2022-05-22

问题描述

我正在使用 Fortify 来管理用户身份验证，并且我有一个用于登录的模态表单。我的问题是每次提交表单时我都看不到任何错误，因为页面刷新并关闭了登录表单的模式。

我想知道是否可以在前端进行此验证而无需刷新页面，因此模态不会关闭。我已经尝试过使用 Ajax，但我找不到正确的方法来管理它，甚至找不到我应该在哪个控制器中处理响应的 if 语句。

如果有人能帮助我，我将不胜感激。

这是我的模态：

<!-- LOGIN Modal -->
<form  action="{{ route('login') }}" method="post">
    @csrf
  <div class="modal fade" id="login" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" >
      <div class="modal-content">
        <div class="modal-header">
        <h5>Login</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="alert alert-danger print-error-msg" style="display:none">
            <ul></ul>
        </div>
          <div class="mb-3 row">
   
            <div class="col-sm"><br>
              <input type="text" class="form-control" name="email" value="Email">
            </div>
          </div>
          <div class="mb-3 row">
          
            <div class="col-sm">
              <input type="password" class="form-control" id="inputPassword" name="password" value="Password">
            </div>
          </div>
          <div class="d-grid gap-2">
          <button type="submit" id="btn-login" class="btn btn-login">Continuar</button>
          </div>
        </div>
        <div class="modal-footer">
        
          <label><a href="#recuperar" data-bs-toggle="modal" data-bs-dismiss="modal" class="recupere"><u>Recuperar password</u></a></label>
        </div>
      </div>
    </div>
  </div>
  </form>

这里是 Ajax：

  $(document).ready(function() {
      $("#btn-login").click(function(e) {
          e.preventDefault();
  
          var _token = $("input[name='_token']").val();
          var email = $("input[name='email']").val();
          var password = $("input[name='password']").val();
         
  
          $.ajax({
              url: config.routes.zone,type: 'POST',data: { _token: _token,email: email,password:password },success: function(data) {
  
                  if ($.isEmptyObject(data.error)) {
  
                      window.location.href = {{ route('login') }};
  
                  } else {
                      printErrorMsg(data.error);
                  }
              }
          });
      });
  
      function printErrorMsg(msg) {
          $(".print-error-msg").find("ul").html('');
          $(".print-error-msg").css('display','block');
          $.each(msg,function(key,value) {
              $(".print-error-msg").find("ul").append('<li>' + value + '</li>');
          });
      }
  });

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ajaxauthenticationfortifylaravellaravel