Laravel 5.3 AJAX登录不重定向

Question

我有类似的问题，像这样的one。

我想使用Laravel 5.3 Auth进行AJAX登录。

这是我走到这一步：

var login = function() 
{ 
var data = {}; 

data["email"] = $('#email').val(); 
data["password"] = $('#password').val(); 

if($('#remember').is(':checked')) 
    data["remember"] = "on"; 

$.ajax({ 
    type: "POST", 
    url: '/login', 
    data: JSON.stringify(data), 
    // data: data, 
    headers : { 'Content-Type': 'application/json' }, 

    success: function(data) { 
     console.log(data); 
     // window.location.href = "/dashboard"; 
    } 
}); 

};

我发送CRSF令牌为X-CSRF-TOKEN标题。

的问题是，当我登录成功，我说同样的页面， 上，但在网络选项卡，我可以看到我不是 重定向是/dashboard页面加载。

以同样的方式，当我通过错误的凭据，我留在同一页， ，但我可以看到，/login页面加载在单独的调用中应该实际显示的错误消息。

此外，我试过没有headers : { 'Content-Type': 'application/json' }, 和发送数据为：data = data,但我得到同样的事情。

为什么浏览器不会重定向到该页面，因为它正在“背景”中加载它？

编辑：我得到正确的页面作为请求响应，我可以在控制台（console.log(data);）中看到它 。

Answer 1

这里有一个有趣的solution。

/** 
* Get the failed login response instance. 
* 
* @param \Illuminate\Http\Request $request 
* @return \Illuminate\Http\Response 
*/ 
protected function sendFailedLoginResponse(Request $request) 
{ 
    if ($request->ajax()) { 
     return response()->json([ 
      'error' => Lang::get('auth.failed') 
     ], 401); 
    } 

    return redirect()->back() 
     ->withInput($request->only($this->username(), 'remember')) 
     ->withErrors([ 
      $this->username() => Lang::get('auth.failed'), 
     ]); 
} 

这：

var loginForm = $("#loginForm"); 
loginForm.submit(function(e) { 
    e.preventDefault(); 
    var formData = loginForm.serialize(); 
    $('#form-errors-email').html(""); 
    $('#form-errors-password').html(""); 
    $('#form-login-errors').html(""); 
    $("#email-div").removeClass("has-error"); 
    $("#password-div").removeClass("has-error"); 
    $("#login-errors").removeClass("has-error"); 
    $.ajax({ 
     url: '/login', 
     type: 'POST', 
     data: formData, 
     success: function(data) { 
      $('#loginModal').modal('hide'); 
      location.reload(true); 
     }, 
     error: function(data) { 
      console.log(data.responseText); 
      var obj = jQuery.parseJSON(data.responseText); 
      if (obj.email) { 
       $("#email-div").addClass("has-error"); 
       $('#form-errors-email').html(obj.email); 
      } 
      if (obj.password) { 
       $("#password-div").addClass("has-error"); 
       $('#form-errors-password').html(obj.password); 
      } 
      if (obj.error) { 
       $("#login-errors").addClass("has-error"); 
       $('#form-login-errors').html(obj.error); 
      } 
     } 
    }); 
}); 

Answer 2

//Login FORM 
$(document).on('submit', 'form#FormID', function(e) { 
    e.preventDefault(); 
      var forms = document.querySelector('form#FormID'); 
      var request = new XMLHttpRequest(); 
      var formDatas = new FormData(forms); 
      request.open('post','/login'); 
      request.send(formDatas); 

      request.onreadystatechange = function() { 
       if (request.readyState === 4) { 
        if (request.status === 200) { 

         if (request.responseText == 'success') { 
          setTimeout(function() { 
           window.location.href = "/dashboard"; 
          }, 5000); 
         }else{ 

         }; 


        } 
       } 
      } 
}); 



//Controller 
public function authUser(Request $request){ 
     $data = $request->except('_token'); 

     $validate = \Validator::make($data, [ 
      'email' => 'email' 
      ]); 

     if ($validate->fails()) 
      return 'Invalid email format for username.'; 

     if (\Auth::attempt($data)) { 
      return 'success'; 
     }else{ 
      return 'Invalid username or password'; 
     } 
    } 


//Route 
Route::post('/login', 'YourController@authUser'); 

这个问题可能与AJAX请求在重定向之前期待的响应有关。 尝试上面的代码。

在控制器方法

function login(Request $request){ 
    if(\Auth::attempt($request)){ 
     return response()->json('success'); 
    }else{ 
     return response()->json('wrong username or pass', 401); 
    } 
} 

Answer 3

在阿贾克斯

$.ajax({ 
    type: "POST", 
    url: '/login', 
    data: JSON.stringify(data), 
    // data: data, 
    headers : { 'Content-Type': 'application/json' }, 

    success: function(data) { 
     console.log(data); 
     window.location.href = "/dashboard"; 
    }, 
    error : function(data){ 
     alert(data); 
    } 
});