Chào mọi người nay mình tiếp tục chia sẻ với mọi người cách kết hợp giửa Laravel + Angular 7 để xây dựng chức năng login State, trong đó Angular là chúng ta dùng Front-End còn Laravel chúng ta dùng Back-End
Ở bài hướng dẫn lần trước mình chia sẻ với mọi người cách cài đặt Angular và cách thức để xây dựng trạng thái (State) trong Angular rồi, Bạn có thể xem lại bài viết tại đây Login State in Angular 7, để cài đặt và làm tiếp phần kết hợp với Laravel này nhé
Trong bài này mình sẽ tạo một project Laravel và thiết lập Route API, để cho Angular nó gửi yêu cầu đến Route API của Laravel xác thực Login của chúng ta

 * Cài đặt Laravel 5.4

composer create-project --prefer-dist laravel/laravel laravel-angular "5.4.*"

* Chúng ta cần cài đặt Cors để khi chúng ta gọi API không bị lỗi Cors nhé:

- Bạn có thể xem các cài đặt Cors tại đây :https://packagist.org/packages/barryvdh/laravel-cors

- Sau khi download project về các bạn tiến hình thiết lập kết nối(Connect database), và dùng câu lệnh chạy migrate để Laravel sinh cho ta các table cần thiết trong project

  php artisan migrate

- Bạn bạn có một table User trong project và bạn insert cho mình một dữ liệu mẫu nhé

* Tạo Controller tên UserController:

  php artisan make:controller UserController --resource

- Sau khi tạo xong bạn viết một function đễ xây dụng kiểm tra login. Bạn vào file UserController.php và viết cái hàm kiểm tra login như sau:

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;
use Illuminate\Database\Eloquent\ModelNotFoundException;
use Illuminate\Support\Facades\Hash;
class UserController extends Controller
{
    
    /**
     * CHECK LOGIN
     */
    public function login(Request $request){
        $data = json_decode(json_encode($request->all()), true);
        $data_check = User::where("email","=",$data['email'])->get()->toArray();
        if (count($data_check) > 0) {
            if(Hash::check($data['password'],$data_check[0]['password'])){
                return Response()->json(['success' => 1,"data" =>$data_check,"remember_token"=>""]);
            }else{
                return Response()->json(['success' => 0,"data"=>"Password không đúng","remember_token"=>""]); 
            }  
        }
        return Response()->json(['success' => -1,"data"=>"Email không đúng!","remember_token"=>""]);
        
    }
}

Đoạn code trên trong UserController.php mình tạo hàm login với mục đích khi Angular gửi dữ liệu đến và chúng ta lấy dữ liệu đó để kiểm tra xem có tồn tại trong dữ liệu hay không nếu đúng ta sẽ trả về dữ liệu cần thiết cho Angular.

Sau khi tạo function xong, Để cho Angular gửi dữ liệu đến Laravel được ta cần cần thiết lập Route trong file api.php của thư mục router:

Route::group(['prefix'=>'user'],function(){
      Route::post('/login','UserController@login')->name("user.login");
    });

Trong Route trên mình thêm tiền tố là user, vậy đường đẫn mình có API như sau: http://localhost/laravel-angular/public/api/user/login 
Còn nếu bạn thấy đường dẫn xấu quá bạn có thể đưa file (index.php và .htaccess) trong thư mục public ra ngoài thư mục cùng cấp với app và bạn cần chỉnh lại đường dẫn trỏ các file trong thư mực bootstrap, bạn mở file index.php vừa chuyển ra bên ngoài và chỉnh lại đường dẫn, sau khi chỉnh đường đẫn sẽ đẹp hơn như thế này:http://localhost/laravel-angular/api/user/login 

* Front-End: Ở đây ta cần tạo một thư mục _services trong app , và tạo file user.service.ts để yêu cầu gọi các dịch vụ API mà ta đã thiết lập bên Back-End của Laravel

import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Observable,of} from 'rxjs';
import { map,catchError } from 'rxjs/operators';
import {User} from '../_models';

const httpOptions = {
    headers:new HttpHeaders({'Content-Type':'application/json'})
};

const API_URL = "http://localhost:8080/laravel-angular/public/api";
@Injectable({
    providedIn:'root',
})

export class UserService{
    constructor(private http:HttpClient){}

    /**
     * POST LOGIN USER
     */
    login(user: any) {
        return this.http.post<any>('http://localhost:8080/laravel-angular/public/api/user/login', user,httpOptions)
            .pipe(map(user => {
                return user;
            }));
    }

   
}

Trong file trên các bạn thấy mình gửi yêu cầu đến đường link API_URL để xác thực login bên phía Laravel, và sẻ trả về kết quả cho Angular biết 

Tiếp theo bạn mở file login.component.ts và chỉnh lại như sau:
  import {UserService} from '../_services/user.service.ts'

Thêm UserService vào constructor như sau:
  constructor(private _store:Store<UserState>,private router:Router,private _userService:UserService){} 

- Chỉnh sửa hàm onSubmit() như sau:

onSubmit(){
      this._userService.login(this.profileForm.value).subscribe(item=>{
        if(item.success>0){
            console.log("Success login");
            this._store.dispatch(new userLogins.CheckLoginAction({
                id:item.data[0].id,
                name:item.data[0].name,
                email:item.data[0].email,
                password:item.data[0].password,
                remember_token:item.data[0].remember_token
              }));
            this.router.navigate(['/detail']);
        }
    })
 }

* Toàn bộ file login.component.ts như sau:

import {Component} from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import {Store,State} from "@ngrx/store";
import {Observable, from} from "rxjs";
import {User} from "../_models";
import * as userLogins from '../_actions/userActions';
import {UserState, getLogin} from '../_reducers'
import { Router, ActivatedRoute } from '@angular/router';
import {UserService} from '../_services/user.services'
@Component({
    selector:'box-login',
    templateUrl:'./login.component.html',
    styleUrls:['./login.component.css']
})

export class LoginComponent{
    title = "Box Login"
    profileForm = new FormGroup({
        email: new FormControl(''),
        password: new FormControl(''),
    });
    
    isCheckLogin:boolean = false;
    dataLogin = [
        {
            "id":1,
            "name":"NGUYEN THANH HOA",
            "email":"nguyenthanhhoa.com@gmail.com",
            "password":"12345678",
            "remember_token":'TYDAKSDJASLKDJASLKDJASDASD'
        },
        {
            "id":2,
            "name":"SKIPPERHOA",
            "email":"skipperhoa2013@gmail.com",
            "password":"hoa123",
            "remember_token":'TYDAKSDJASLKDJASLKDJASDASD'
        }
    ]  
   
    constructor(private _store:Store<UserState>,private router:Router,private _userService:UserService){}
    onSubmit() {
      //  console.warn(this.profileForm.value['email']);
      // this.dataLogin.filter(item=>{
          /* if(item.email==this.profileForm.value['email'] && item.password==this.profileForm.value['password']){
               this.isCheckLogin=true;
               this._store.dispatch(new userLogins.CheckLoginAction({
                   id:item.id,
                   name:item.name,
                   email:item.email,
                   password:item.password,
                   remember_token:item.remember_token
                }));
           }*/

           this._userService.login(this.profileForm.value).subscribe(item=>{
               if(item.success>0){
                    console.log("Success login");
                    this._store.dispatch(new userLogins.CheckLoginAction({
                        id:item.data[0].id,
                        name:item.data[0].name,
                        email:item.data[0].email,
                        password:item.data[0].password,
                        remember_token:item.data[0].remember_token
                     }));
                    this.router.navigate(['/detail']);
               }
          })

      // });
     /*  if(this.isCheckLogin){
            console.log("Success login");
            this.router.navigate(['/detail']);
       }
       else{
           console.log("Fail login");
       }
       */
    }

}

Bạn có thể xem source tại Github:https://github.com/skipperhoa/login-state-in-angular-7