Hướng dẫn tạo trang đăng nhập sử dụng Laravel với Ajax

 

Chúng ta bắt đầu nào.

Quá trình thực hiện các bạn có thể tham khảo tại video trước của mình tại 

http://giaphiep.com/tao-trang-dang-nhap-su-dung-laravel-1460349133.html

Và sửa một số chỗ như sau.

Trong app\Http\Controllers\Logincontroller.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use Validator;
use Auth;
use Illuminate\Support\MessageBag;

class LoginController extends Controller
{
    
    public function getLogin() {
    	return view('login');
    }
    public function postLogin(Request $request) {
       
    	$rules = [
    		'email' =>'required|email',
    		'password' => 'required|min:8'
    	];
    	$messages = [
    		'email.required' => 'Email là trường bắt buộc',
    		'email.email' => 'Email không đúng định dạng',
    		'password.required' => 'Mật khẩu là trường bắt buộc',
    		'password.min' => 'Mật khẩu phải chứa ít nhất 8 ký tự',
    	];
    	$validator = Validator::make($request->all(), $rules, $messages);

    	if ($validator->fails()) {
            return response()->json([
                    'error' => true,
                    'message' => $validator->errors()
                ], 200);
    		// return redirect()->back()->withErrors($validator)->withInput();
    	} else {
    		$email = $request->input('email');
    		$password = $request->input('password');

    		if( Auth::attempt(['email' => $email, 'password' =>$password], $request->has('remember'))) {
                return response()->json([
                    'error' => false,
                    'message' => 'success'
                ], 200);
    			// return redirect()->intended('/');
    		} else {
    			$errors = new MessageBag(['errorlogin' => 'Email hoặc mật khẩu không đúng']);
                return response()->json([
                    'error' => true,
                    'message' => $errors
                ], 200);
    			// return redirect()->back()->withInput()->withErrors($errors);
    		}
    	}
    }
}

Trong resources\views\login.blade.php sửa form login như sau

<form action="#" method="POST" role="form">
					<legend>Login</legend>
					
						<div class="alert alert-danger error errorLogin" style="display: none;">
							<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
							<p style="color:red; display:none;" class="error errorLogin"></p>
						</div>
					
					<div class="form-group">
						<label for="">Email</label>
						<input type="text" class="form-control" id="email" placeholder="Email" name="email" value="{{old('email')}}">
						<p style="color:red; display: none" class="error errorEmail"></p>
					</div>
					<div class="form-group">
						<label for="">Password</label>
						<input type="password" class="form-control" id="password" placeholder="Password" name="password">
						<p style="color:red; display: none" class="error errorPassword"></p>
					</div>
					<div class="form-group">
						<input type="checkbox" name="remember"> Ghi nhớ
					</div>
					
		
					<button id="dang-nhap" type="submit" class="btn btn-primary">Đăng nhập</button>
				</form>

 

và thêm một thẻ script bên dưới thẻ đóng body của login.blade.php như sau

<script src="{{url('js/login.js')}}"></script>

tiếp theo bạn cần tạo một file login.js trong public/js/ như sau

$(function() {
		$('#dang-nhap').click(function(e) {
			e.preventDefault();
			$.ajaxSetup({
			        headers: {
			            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			        }
			});
			$.ajax({
					'url' : 'login',
					'data': {
						'email' : $('#email').val(),
						'password' : $('#password').val()
					},
					'type' : 'POST',
					success: function (data) {
						console.log(data);
						if (data.error == true) {
							$('.error').hide();
							if (data.message.email != undefined) {
								$('.errorEmail').show().text(data.message.email[0]);
							}
							if (data.message.password != undefined) {
								$('.errorPassword').show().text(data.message.password[0]);
							}
							if (data.message.errorlogin != undefined) {
								$('.errorLogin').show().text(data.message.errorlogin[0]);
							}
						} else {
							window.location.href = "http://localhost/authentication/public/"
						}
					}
				});
		})
	});

Vậy là chúng ta đã có một trang login sử dụng Ajax.