Laravel 5.5 ReactJS Phần 2 - Sử dụng JWT xác thực người dùng

Bài trước chúng ta đã tìm hiểu, cài đặt và sử dụng react router v4. , bài tiếp theo chúng ta sẽ cùng tìm hiểu sử dụng JWT xác thực người dùng.

Cài đặt JWT

composer require tymon/jwt-auth

Cập nhật config/app.php file.

'providers' => [
	....
	TymonJWTAuthProvidersJWTAuthServiceProvider::class,
],
'aliases' => [
	....
	'JWTAuth' => TymonJWTAuthFacadesJWTAuth::class,
],

Tiến hành publish file config JWT run command :

php artisan vendor:publish --provider="TymonJWTAuthProvidersJWTAuthServiceProvider"

Sau khi run command thành công config/jwt.php được tạo ra.

Tạo ra JWT Token run command

php artisan jwt:secret

Nếu bạn run command trên sảy ra nỗi trong terminal. Lỗi này xảy ra trong phiên bản 5.5 laravel. Gải pháp cho nó như sau:

[ReflectionException]
Method TymonJWTAuthCommandsJWTGenerateCommand::handle() does not exist

Cần cài đặt new dev version of tymon/jwt-auth package.

composer require tymon/jwt-auth:dev-develop --prefer-source

Sau khi cài đặt xong tiến hành thay thế config/app.php và thay thế providers cũ providers mới.

'providers' => [
    ....
    TymonJWTAuthProvidersJWTAuthServiceProvider::class to TymonJWTAuthProvidersLaravelServiceProvider::class
],

Tiếp theo chạy command tạo ra jwt key.

php artisan jwt:secret

Tạo middleware cho JWT command:

php artisan make:middleware AuthJWT

Cập nhật AuthJWT:

namespace AppHttpMiddleware;

use Closure;
use JWTAuth;
use Exception;

class AuthJWT
{
    /**
     * Handle an incoming request.
     *
     * @param  IlluminateHttpRequest  $request
     * @param  Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        try {
            $user = JWTAuth::toUser($request->input('token'));
        } catch (Exception $e) {
            if ($e instanceof TymonJWTAuthExceptionsTokenInvalidException){
                return response()->json(['error'=>'Token is Invalid']);
            }else if ($e instanceof TymonJWTAuthExceptionsTokenExpiredException){
                return response()->json(['error'=>'Token is Expired']);
            }else{
                return response()->json(['error'=>'Something is wrong']);
            }
        }
        return $next($request);
    }
}

Đăng ký Middleware

Mở app/Http/Kernel.php cập nhật.

    protected $routeMiddleware = [
        ...
        'jwt-auth' => AppHttpMiddlewareAuthJWT::class,
    ];

Tạo database laravel_reatjs

Cập nhật file .env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_reactjs
DB_USERNAME=root
DB_PASSWORD=

Chạy migrate tạo table users.

php artisan migrate

Tao dữ liệu người dùng cho đăng nhập. UserFactory.

$factory->define(AppUser::class, function (Faker $faker) {
    return [
        'name' => $faker->name,
        'email' => 'user@gmail.com',
        'password' => Hash::make('secret'), 
        'remember_token' => str_random(10),
    ];
});

Cập nhật DatabaseSeeder.php

  public function run()
    {
//         $this->call(UsersTableSeeder::class);
        factory(AppUser::class)->create();
    }

Đăng ký dữ liệu test run comand.

php artisan db:seed

Tạo ApiController command sau:

php artisan make:controller ApiController

Cập nhật ApiController

namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppHttpControllersController;
use AppHttpRequests;
use JWTAuth;
use JWTAuthException;
use AppUser;

class ApiController extends Controller
{

    public function login(Request $request){
        $credentials = $request->only('email', 'password');
        $token = null;
        try {
            if (!$token = JWTAuth::attempt($credentials)) {
                return response()->json([
                    'response' => 'error',
                    'message' => 'invalid_email_or_password',
                ]);
            }
        } catch (JWTAuthException $e) {
            return response()->json([
                'response' => 'error',
                'message' => 'failed_to_create_token',
            ]);
        }
        return response()->json([
            'response' => 'success',
            'result' => [
                'token' => $token,
            ],
        ]);
    }
}

Tạo giao diện đăng nhập.

import React, {Component} from 'react';
import axios from 'axios';
import {Redirect} from 'react-router-dom';

class Login extends Component {
    constructor(props) {
        super(props)
        this.state = {
            email: ',
            password: ',
        };
        this.handleChangeEmail = this.handleChangeEmail.bind(this);
        this.handleChangePassword = this.handleChangePassword.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChangeEmail(e) {
        this.setState({email: e.target.value});
    }

    handleChangePassword(e) {
        this.setState({password: e.target.value});
    }

    handleSubmit(e) {
        e.preventDefault();
        let uri = '/login';
        axios.post(uri, this.state).then((response) => {
            if (response.data.result) {
                localStorage.setItem('jwt', response.data.result);
                this.props.history.push('/');
            }
        })
    }
    render() {
        return (
            <div className="panel panel-default">
                <div className="panel-heading ">Login</div>
                <div className="panel-body">
                    <form onSubmit={this.handleSubmit}>
                        <label>User name</label>
                        <input type={'text'} className="form-control" onChange={this.handleChangeEmail}/>
                        <label>Password</label>
                        <input type={'password'} className="form-control"
                               onChange={this.handleChangePassword}/>
                        <div className="form-group">
                            <button className="btn btn-primary" onClick={this.handleSubmit}>Đăng nhập</button>
                        </div>
                    </form>
                </div>
            </div>
        )
    }
}
export default Login

Cập nhật Example.js.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {HashRouter, Link, Redirect} from 'react-router-dom';
import RouterPath from '../routes/RouterPath';

export default class Example extends Component {
    render() {
        let login = localStorage.getItem('jwt');
        if (!login) {
            console.log('here');
            return (
                <HashRouter>
                    <div>
                        <Redirect to='login'/>
                        <RouterPath/>
                    </div>
                </HashRouter>
            )
        }
        return (
            <HashRouter>
                <div>
                    <ul>
                        <li>
                            <Link to={'/'}>Home</Link>
                        </li>
                        <li>
                            <Link to={'/topic'}>Topic</Link>
                        </li>
                        <li>
                            <Link to={'/about'}>About</Link>
                        </li>
                    </ul>
                    <RouterPath/>
                </div>
            </HashRouter>
        )
    }
}

if (document.getElementById('example')) {
    ReactDOM.render(
        <Example/>,
        document.getElementById('example'));
}

Cập nhật routes/api.php

Route::post('/login', 'ApiController@login');

Cửa sổ cmd gõ lệnh sau:

npm run dev

Nó sẽ biên dịch các file trong assets and copy đến public >> js >> app.js file.

Xem kết quả tại: http://localhost/blog/public sẽ tự động chuyển đến màn login tiến hành nhập thông tin đã đăng ký ở trên tiến hành đăng nhập. Đăng nhập thành công chuyển đến màn hình home.

Cảm ơn các bạn đã xem nguồn :

https://laravelcode.com/post/restful-api-in-laravel-55-using-jwt-authentication

https://www.techiediaries.com/react-router-dom-v4/

http://jwt-auth.readthedocs.io/en/develop/