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

//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请求的响应。试试上面的代码。

Answer 2

在控制器方法

中

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

在ajax中

$.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);
    }
});

Answer 3

这是一个有趣的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);
            }
        }
    });
});

Laravel 5.3 AJAX登录不重定向

3 个答案: