使用Laravel使用Ajax登錄表單5.2

Question

我嘗試使用Laravel 5.2 Auth使用Ajax創建登錄表單。

$(document).ready(function(){ 
$.ajaxSetup({ 
    headers: { 
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
    } 
}); 

$('#login').on('click',function(e){ 
e.preventDefault(); 

var formData = { 
    email: $('#email').val(), 
    password: $('#password').val(), 
} 
    $.ajax({ 
     type: "POST", 
     url: "/login", 
     data: formData, 
     success: function (data) { 
      location.reload(); 
     }, 
     error: function (data) { 

     } 
    }); 

}); 

})enter code here 

Laravel默認登錄功能：

public function login(Request $request) 
{ 
$this->validateLogin($request); 

// If the class is using the ThrottlesLogins trait, we can automatically throttle 
// the login attempts for this application. We'll key this by the username and 
// the IP address of the client making these requests into this application. 
$throttles = $this->isUsingThrottlesLoginsTrait(); 

if ($throttles && $lockedOut = $this->hasTooManyLoginAttempts($request)) { 
    $this->fireLockoutEvent($request); 

    return $this->sendLockoutResponse($request); 
} 

$credentials = $this->getCredentials($request); 

if (Auth::guard($this->getGuard())->attempt($credentials, $request->has('remember'))) { 
    return $this->handleUserWasAuthenticated($request, $throttles); 
} 

// If the login attempt was unsuccessful we will increment the number of attempts 
// to login and redirect the user back to the login form. Of course, when this 
// user surpasses their maximum number of attempts they will get locked out. 
if ($throttles && ! $lockedOut) { 
    $this->incrementLoginAttempts($request); 
} 

return $this->sendFailedLoginResponse($request); 
} 

/登錄返回索引頁作爲響應。 我需要關於錯誤消息或成功消息的json響應。據說，改變Laravel的核心功能並不可取。那我怎麼能得到它？

Answer 1

你可以嘗試jQuery中添加

dataType: 'JSON' 

或嘗試在會話存儲和使用

Redirect::back() 

或

return redirect($this->loginPath()) 
     ->withInput($request->only('email', 'remember')) 
     ->withErrors([ 
      'email' => $this->getFailedLoginMessage(), 
     ]); 

Answer 2

我瞭解你的代碼示例只是複製AuthenticatesUser特徵。

因此，爲了避免大的變化，並使其發揮作用，只是這種替換app/Http/Controllers/LoginController.php默認控制器代碼：

<?php 

namespace App\Http\Controllers\Auth; 

use Illuminate\Http\Request; 
use Illuminate\Support\Facades\Auth; 

class LoginController extends Controller 
{ 
    public function __construct() 
    { 
     $this->middleware('guest', ['except' => 'logout']); 
    } 

    protected function username() { 
     return 'email'; 
    } 

    public function login(Request $request) 
    { 
     $credentials = $request->only($this->username(), 'password'); 
     $authSuccess = Auth::attempt($credentials, $request->has('remember')); 

     if($authSuccess) { 
      $request->session()->regenerate(); 
      return response(['success' => true], Response::HTTP_OK); 
     } 

     return 
      response([ 
       'success' => false, 
       'message' => 'Auth failed (or some other message)' 
      ], Response::HTTP_FORBIDDEN); 
    } 

    public function logout(Request $request) 
    { 
     Auth::logout(); 
     $request->session()->flush(); 
     $request->session()->regenerate(); 

     return redirect('/'); 
    } 
} 

JS部分可以保持相同的：

$.ajax({ 
    type: "POST", 
    url: "/login", 
    data: formData, 
    dataType:'json', 
    success: function (response) { 
     if(response.success) { 
     location.reload(); 
     } 
    }, 
    error: function (jqXHR) { 
     var response = $.parseJSON(jqXHR.responseText); 
     if(response.message) { 
     alert(response.message); 
     } 
    } 
}); 

但我個人更喜歡處理的不是提交的按鈕，而是通常的形式，以防止發生這種情況時，用戶公關只需點擊登錄按鈕即可。

檢查這個例子：

HTML的一部分：

<form class="login" action="{{ url('/login') }}" method="post" data-type="json"> 
    <input type="text" name="email"> 
    <input type="password" name="password"> 
    <button type="submit">login</button> 
</form> 

JS部分：

$(function() { 

    $.ajaxSetup({ 
    headers: { 
     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
    } 
    }); 

    $('form.login:first').on('submit', function(e){ 
    e.preventDefault(); 

    var $this = $(this); 

    $.ajax({ 
     type: $this.attr('method'), 
     url: $this.attr('action'), 
     data: $this.serializeArray(), 
     dataType: $this.data('type'), 
     success: function (response) { 
      if(response.success) { 
      location.reload(); 
      } 
     }, 
     error: function (jqXHR) { 
      var response = $.parseJSON(jqXHR.responseText); 
      if(response.message) { 
      alert(response.message); 
      } 
     } 
    }); 
    }); 

}); 

Answer 3

請試試這個

use Validator; 
use Auth; 


public function postUserLogin(Request $request) { 
    $credentials = array_trim($request->only('email', 'password')); 
    $rules = ['email' => 'required|email|max:255', 
     'password' => 'required' 
    ]; 

    $validation = Validator::make($credentials, $rules); 
    $errors = $validation->errors(); 
    $errors = json_decode($errors); 
    if ($validation->passes()) { 
     if (Auth::attempt(['email' => trim($request->email), 
        'password' => $request->password, 
         ], $request->has('remember'))) { 


      return response()->json(['redirect' => true, 'success' => true], 200); 
     } else { 
      $message = 'Invalid username or password'; 

      return response()->json(['password' => $message], 422); 
     } 
    } else { 
     return response()->json($errors, 422); 
    } 
}