Registration Log in using Laravel + VueJS

Monday, 20/07/2020

Tram Ho

1. Introduction

Hello everyone, I have time to come back to continue with Vuejs Spa + Laravel authentiaction jwt series. Let’s start too.

2. Back end (Laravel)

Step 1

Create a Laravel composer create-project --prefer-dist laravel/laravel learning project composer create-project --prefer-dist laravel/laravel learning

run comand line :

composer install
php artisan key: generate
cp .env.example .env
composer require laravel / ui (package laravel ui)
After running php Artisan after running, you can see a component folder in resoures / js
npm install or yarn install to describe packages.

Install the JWT package

composer requires tymon / jwt-auth
Next open config / app.php: add provider: Tymon JWTAuth Providers LaravelServiceProvider :: class, add aliases

    <span class="token single-quoted-string string">'JWTAuth'</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> Tymon <span class="token package">JWTAuth  Facades  JWTAuth</span> <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token keyword">class</span> <span class="token punctuation">,</span>
    <span class="token single-quoted-string string">'JWTFactory'</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> Tymon <span class="token package">JWTAuth  Facades  JWTFactory</span> <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token keyword">class</span> <span class="token punctuation">,</span>

'JWTAuth' = > Tymon JWTAuth Facades JWTAuth : : class ,

'JWTFactory' = > Tymon JWTAuth Facades JWTFactory : : class ,

then we publish it: php artisan vendor:publish --provider="TymonJWTAuthProvidersLaravelServiceProvider"

Step 2

First create 1 controller:

php artisan make:controller api/SinglePageController The purpose of this Controller is to return the view using vueJs.

<span class="token php language-php"><span class="token delimiter important">&lt;?php</span>

<span class="token keyword">namespace</span> <span class="token package">App  Http  Controllers  api</span> <span class="token punctuation">;</span>

<span class="token keyword">use</span> <span class="token package">App  Http  Controllers  Controller</span> <span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">Illuminate  Http  Request</span> <span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">SinglePageController</span> <span class="token keyword">extends</span> <span class="token class-name">Controller</span>
<span class="token punctuation">{</span>
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">index</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token function">view</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'app'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span>

<?php

namespace App Http Controllers api ;

use App Http Controllers Controller ;

use Illuminate Http Request ;

class SinglePageController extends Controller

{

public function index ( )

{

return view ( 'app' ) ;

}

Step 3

A token generated when we login will return the User model. The User model will implement JWTSubject and update the model again:

<span class="token keyword">namespace</span> <span class="token package">App  Models</span> <span class="token punctuation">;</span>

<span class="token keyword">use</span> <span class="token package">Illuminate  Notifications  Notifiable</span> <span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">Illuminate  Contracts  Auth  MustVerifyEmail</span> <span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">Illuminate  Foundation  Auth  User</span> <span class="token keyword">as</span> Authenticatable <span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">Tymon  JWTAuth  Contracts  JWTSubject</span> <span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">User</span> <span class="token keyword">extends</span> <span class="token class-name">Authenticatable</span> <span class="token keyword">implements</span> <span class="token class-name">JWTSubject</span>
<span class="token punctuation">{</span>
    <span class="token keyword">use</span> <span class="token package">Notifiable</span> <span class="token punctuation">;</span>

    <span class="token comment">/**
     * The attributes that are mass assignable.
     *
     * @var array
     */</span>
    <span class="token keyword">protected</span> <span class="token variable">$fillable</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
        <span class="token single-quoted-string string">'name'</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'email'</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'password'</span> <span class="token punctuation">,</span>
    <span class="token punctuation">]</span> <span class="token punctuation">;</span>

    <span class="token comment">/**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */</span>
    <span class="token keyword">protected</span> <span class="token variable">$hidden</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
        <span class="token single-quoted-string string">'password'</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'remember_token'</span> <span class="token punctuation">,</span>
    <span class="token punctuation">]</span> <span class="token punctuation">;</span>

    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">getJWTIdentifier</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token variable">$this</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">getKey</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">getJWTCustomClaims</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

namespace App Models ;

use Illuminate Notifications Notifiable ;

use Illuminate Contracts Auth MustVerifyEmail ;

use Illuminate Foundation Auth User as Authenticatable ;

use Tymon JWTAuth Contracts JWTSubject ;

class User extends Authenticatable implements JWTSubject

{

use Notifiable ;

/**

* The attributes that are mass assignable.

* @var array

*/

protected $fillable = [

'name' , 'email' , 'password' ,

] ;

/**

* The attributes that should be hidden for arrays.

* @var array

*/

protected $hidden = [

'password' , 'remember_token' ,

] ;

public function getJWTIdentifier ( )

{

}

public function getJWTCustomClaims ( )

{

return [ ] ;

}

Step 4 Update Authentication Middleware

Update them to middeware Autenticate.php

<span class="token php language-php"><span class="token delimiter important">&lt;?php</span>

<span class="token keyword">namespace</span> <span class="token package">App  Http  Middleware</span> <span class="token punctuation">;</span>

<span class="token keyword">use</span> <span class="token package">Illuminate  Auth  Middleware  Authenticate</span> <span class="token keyword">as</span> Middleware <span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">Authenticate</span> <span class="token keyword">extends</span> <span class="token class-name">Middleware</span>
<span class="token punctuation">{</span>
    <span class="token comment">// Override handle method</span>
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">handle</span> <span class="token punctuation">(</span> <span class="token variable">$request</span> <span class="token punctuation">,</span> Closure <span class="token variable">$next</span> <span class="token punctuation">,</span> <span class="token punctuation">.</span> <span class="token punctuation">.</span> <span class="token punctuation">.</span> <span class="token variable">$guards</span> <span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token variable">$this</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">authenticate</span> <span class="token punctuation">(</span> <span class="token variable">$request</span> <span class="token punctuation">,</span> <span class="token variable">$guards</span> <span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token single-quoted-string string">'authentication_failed'</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token function">response</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'error'</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token single-quoted-string string">'Unauthorized'</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token number">400</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">return</span> <span class="token variable">$next</span> <span class="token punctuation">(</span> <span class="token variable">$request</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment">// Override authentication method</span>
    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function">authenticate</span> <span class="token punctuation">(</span> <span class="token variable">$request</span> <span class="token punctuation">,</span> <span class="token keyword">array</span> <span class="token variable">$guards</span> <span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">empty</span> <span class="token punctuation">(</span> <span class="token variable">$guards</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token variable">$guards</span> <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token constant">null</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">foreach</span> <span class="token punctuation">(</span> <span class="token variable">$guards</span> <span class="token keyword">as</span> <span class="token variable">$guard</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token variable">$this</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">auth</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">guard</span> <span class="token punctuation">(</span> <span class="token variable">$guard</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">check</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">return</span> <span class="token variable">$this</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">auth</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">shouldUse</span> <span class="token punctuation">(</span> <span class="token variable">$guard</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">return</span> <span class="token single-quoted-string string">'authentication_failed'</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</span>

<?php

namespace App Http Middleware ;

use Illuminate Auth Middleware Authenticate as Middleware ;

class Authenticate extends Middleware

{

// Override handle method

public function handle ( $request , Closure $next , . . . $guards )

{

if ( $this - > authenticate ( $request , $guards ) === 'authentication_failed' ) {

return response ( ) - > json ( [ 'error' = > 'Unauthorized' ] , 400 ) ;

}

return $next ( $request ) ;

}

// Override authentication method

protected function authenticate ( $request , array $guards )

{

if ( empty ( $guards ) ) {

$guards = [ null ] ;

}

foreach ( $guards as $guard ) {

if ( $this - > auth - > guard ( $guard ) - > check ( ) ) {

}

return 'authentication_failed' ;

}

Step 5

Next we create a controller to serve the view, create, update php artisan make:controller api/UserController

    <span class="token php language-php"><span class="token delimiter important">&lt;?php</span>

<span class="token keyword">namespace</span> <span class="token package">App  Http  Controllers  api</span> <span class="token punctuation">;</span>

<span class="token keyword">use</span> <span class="token package">App  Http  Controllers  Controller</span> <span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">Illuminate  Http  Request</span> <span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">App  Http  Models  User</span> <span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">UserController</span> <span class="token keyword">extends</span> <span class="token class-name">Controller</span>
<span class="token punctuation">{</span>
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">__construct</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token variable">$this</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">middleware</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'auth:api'</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'except'</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'login'</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'register'</span> <span class="token punctuation">]</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">index</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token function">response</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token function">auth</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'api'</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">user</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">login</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        <span class="token variable">$credentials</span> <span class="token operator">=</span> <span class="token function">request</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'email'</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'password'</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token operator">!</span> <span class="token variable">$token</span> <span class="token operator">=</span> <span class="token function">auth</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'api'</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">attempt</span> <span class="token punctuation">(</span> <span class="token variable">$credentials</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token function">response</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'error'</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token single-quoted-string string">'Unauthorized'</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token number">401</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token keyword">return</span> <span class="token variable">$this</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">respondWithToken</span> <span class="token punctuation">(</span> <span class="token variable">$token</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">logout</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        <span class="token function">auth</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'api'</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">logout</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

        <span class="token keyword">return</span> <span class="token function">response</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'message'</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token single-quoted-string string">'Successfully logged out'</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">register</span> <span class="token punctuation">(</span> Request <span class="token variable">$request</span> <span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        <span class="token variable">$this</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">validate</span> <span class="token punctuation">(</span> <span class="token variable">$request</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span>
            <span class="token single-quoted-string string">'name'</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token single-quoted-string string">'required'</span> <span class="token punctuation">,</span>
            <span class="token single-quoted-string string">'email'</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token single-quoted-string string">'required|email|unique:users'</span> <span class="token punctuation">,</span>
            <span class="token single-quoted-string string">'password'</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token single-quoted-string string">'required|min:6'</span> <span class="token punctuation">,</span>
        <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

        <span class="token variable">$user</span> <span class="token operator">=</span> User <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">create</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span>
            <span class="token single-quoted-string string">'name'</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token variable">$request</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">name</span> <span class="token punctuation">,</span>
            <span class="token single-quoted-string string">'email'</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token variable">$request</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">email</span> <span class="token punctuation">,</span>
            <span class="token single-quoted-string string">'password'</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token variable">$request</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">password</span> <span class="token punctuation">,</span>
        <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

        <span class="token keyword">return</span> <span class="token function">response</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'user'</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token variable">$user</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> Response <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token constant">HTTP_OK</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">refresh</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token variable">$this</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">respondWithToken</span> <span class="token punctuation">(</span> <span class="token function">auth</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'api'</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">refresh</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function">respondWithToken</span> <span class="token punctuation">(</span> <span class="token variable">$token</span> <span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token function">response</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span>
            <span class="token single-quoted-string string">'access_token'</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token variable">$token</span> <span class="token punctuation">,</span>
            <span class="token single-quoted-string string">'user'</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token variable">$this</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">guard</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span>
            <span class="token single-quoted-string string">'token_type'</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token single-quoted-string string">'bearer'</span> <span class="token punctuation">,</span>
            <span class="token single-quoted-string string">'expires_in'</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token function">auth</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'api'</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">factory</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">getTTL</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">60</span>
        <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">guard</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        <span class="token keyword">return</span> Auth <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">Guard</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'api'</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">user</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span>

<?php

namespace App Http Controllers api ;

use App Http Controllers Controller ;

use Illuminate Http Request ;

use App Http Models User ;

class UserController extends Controller

{

public function __construct ( ) {

$this - > middleware ( 'auth:api' , [ 'except' = > [ 'login' , 'register' ] ] ) ;

}

{

return response ( ) - > json ( auth ( 'api' ) - > user ( ) ) ;

}

public function login ( )

{

$credentials = request ( [ 'email' , 'password' ] ) ;

if ( ! $token = auth ( 'api' ) - > attempt ( $credentials ) ) {

return response ( ) - > json ( [ 'error' = > 'Unauthorized' ] , 401 ) ;

}

public function logout ( )

{

auth ( 'api' ) - > logout ( ) ;

return response ( ) - > json ( [ 'message' = > 'Successfully logged out' ] ) ;

}

public function register ( Request $request )

{

$this - > validate ( $request , [

'name' = > 'required' ,

'email' = > 'required|email|unique:users' ,

'password' = > 'required|min:6' ,

] ) ;

$user = User : : create ( [

'name' = > $request - > name ,

'email' = > $request - > email ,

'password' = > $request - > password ,

] ) ;

return response ( ) - > json ( [ 'user' = > $user ] , Response : : HTTP_OK ) ;

}

public function refresh ( )

{

return $this - > respondWithToken ( auth ( 'api' ) - > refresh ( ) ) ;

}

protected function respondWithToken ( $token )

{

'access_token' = > $token ,

'user' = > $this - > guard ( ) ,

'token_type' = > 'bearer' ,

'expires_in' = > auth ( 'api' ) - > factory ( ) - > getTTL ( ) * 60

] ) ;

}

public function guard ( )

{

return Auth : : Guard ( 'api' ) - > user ( ) ;

}

Step 6 – Blade

<span class="token doctype">&lt;!doctype html&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> html</span> <span class="token attr-name">lang</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {{ str_replace('_', '-', app()-&gt;getLocale()) }} <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> head</span> <span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> meta</span> <span class="token attr-name">charset</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> utf-8 <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> meta</span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> viewport <span class="token punctuation">"</span></span> <span class="token attr-name">content</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> width=device-width, initial-scale=1 <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> meta</span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> csrf-token <span class="token punctuation">"</span></span> <span class="token attr-name">content</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {{ csrf_token() }} <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> title</span> <span class="token punctuation">&gt;</span></span> Laravel <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> title</span> <span class="token punctuation">&gt;</span></span>

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> link</span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons <span class="token punctuation">"</span></span> <span class="token attr-name">rel</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> stylesheet <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> link</span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css <span class="token punctuation">"</span></span> <span class="token attr-name">rel</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> stylesheet <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>

        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> link</span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {{ asset('css/app.css') }} <span class="token punctuation">"</span></span> <span class="token attr-name">rel</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> stylesheet <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> link</span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {{ asset('css/custom.css') }} <span class="token punctuation">"</span></span> <span class="token attr-name">rel</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> stylesheet <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> head</span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> body</span> <span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> app <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> script</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> {{ asset('js/app.js') }} <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> script</span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> body</span> <span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> html</span> <span class="token punctuation">&gt;</span></span>

<!doctype html>

< html lang = " {{ str_replace('_', '-', app()->getLocale()) }} " >

< head >

< meta charset = " utf-8 " >

< meta name = " viewport " content = " width=device-width, initial-scale=1 " >

< meta name = " csrf-token " content = " {{ csrf_token() }} " >

< title > Laravel </ title >

< link href = " https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons " rel = " stylesheet " >

< link href = " https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css " rel = " stylesheet " >

< link href = " {{ asset('css/app.css') }} " rel = " stylesheet " >

< link href = " {{ asset('css/custom.css') }} " rel = " stylesheet " >

</ head >

< body >

< div id = " app " > </ div >

< script src = " {{ asset('js/app.js') }} " > </ script >

</ body >

</ html >

Throw this in resources / views / welcome.blade.php

3 Client (VueJs)

Step 1

Clien, we use 2 packages, vue-router and websanova / vue-auth

npm install @websanova/vue-auth

npm install vue-router

npm install @websanova/vue-auth

npm install vue-router

Webpack Mix Mix js file and style into public folder, I also want to use the path to access Vue components more easily so I will use alias

<span class="token keyword">const</span> mix <span class="token operator">=</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">'laravel-mix'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

mix <span class="token punctuation">.</span> <span class="token function">webpackConfig</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
   resolve <span class="token operator">:</span> <span class="token punctuation">{</span>
      extensions <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'.js'</span> <span class="token punctuation">,</span> <span class="token string">'.vue'</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span>
      alias <span class="token operator">:</span> <span class="token punctuation">{</span>
         <span class="token string">'@'</span> <span class="token operator">:</span> __dirname <span class="token operator">+</span> <span class="token string">'/resources/js'</span> <span class="token punctuation">,</span>
      <span class="token punctuation">}</span>
   <span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span>

<span class="token comment">/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */</span>

mix <span class="token punctuation">.</span> <span class="token function">js</span> <span class="token punctuation">(</span> <span class="token string">'resources/js/app.js'</span> <span class="token punctuation">,</span> <span class="token string">'public/js'</span> <span class="token punctuation">)</span>
   <span class="token punctuation">.</span> <span class="token function">sass</span> <span class="token punctuation">(</span> <span class="token string">'resources/sass/app.scss'</span> <span class="token punctuation">,</span> <span class="token string">'public/css'</span> <span class="token punctuation">)</span>
   <span class="token punctuation">.</span> <span class="token function">sass</span> <span class="token punctuation">(</span> <span class="token string">'resources/sass/custom.scss'</span> <span class="token punctuation">,</span> <span class="token string">'public/css'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

const mix = require ( 'laravel-mix' ) ;

mix . webpackConfig ( {

resolve : {

extensions : [ '.js' , '.vue' ] ,

alias : {

'@' : __dirname + '/resources/js' ,

}

} )

/*

|--------------------------------------------------------------------------

| Mix Asset Management

|--------------------------------------------------------------------------

| Mix provides a clean, fluent API for defining some Webpack build steps

| for your Laravel application. By default, we are compiling the Sass

| file for the application as well as bundling up all the JS files.

*/

mix . js ( 'resources/js/app.js' , 'public/js' )

. sass ( 'resources/sass/app.scss' , 'public/css' )

. sass ( 'resources/sass/custom.scss' , 'public/css' ) ;

Now access the vue components in resoure / js directory, just replace with @ /

Step 2 – Router

<span class="token keyword">import</span> VueRouter <span class="token keyword">from</span> <span class="token string">'vue-router'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> Login <span class="token keyword">from</span> <span class="token string">'@/components/auth/LoginComponent'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> Register <span class="token keyword">from</span> <span class="token string">'@/components/auth/RegisterComponent'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> Dashboard <span class="token keyword">from</span> <span class="token string">'@/components/DashboadComponent'</span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token comment">// path for determined page</span>
    <span class="token punctuation">{</span>
        path <span class="token operator">:</span> <span class="token string">'/register'</span> <span class="token punctuation">,</span>
        component <span class="token operator">:</span> Register
    <span class="token punctuation">}</span> <span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
        path <span class="token operator">:</span> <span class="token string">'/login'</span> <span class="token punctuation">,</span>
        component <span class="token operator">:</span> Login <span class="token punctuation">,</span>
        name <span class="token operator">:</span> <span class="token string">'login'</span> <span class="token punctuation">,</span>
        meta <span class="token operator">:</span> <span class="token punctuation">{</span>
            auth <span class="token operator">:</span> <span class="token boolean">false</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span> <span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
        path <span class="token operator">:</span> <span class="token string">'/home'</span> <span class="token punctuation">,</span>
        component <span class="token operator">:</span> Dashboard <span class="token punctuation">,</span>
        name <span class="token operator">:</span> <span class="token string">'home'</span> <span class="token punctuation">,</span>
        meta <span class="token operator">:</span> <span class="token punctuation">{</span>
            auth <span class="token operator">:</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">]</span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
    mode <span class="token operator">:</span> <span class="token string">'history'</span> <span class="token punctuation">,</span>
    routes <span class="token operator">:</span> routes
<span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> router <span class="token punctuation">;</span>

import VueRouter from 'vue-router' ;

import Login from '@/components/auth/LoginComponent' ;

import Register from '@/components/auth/RegisterComponent' ;

import Dashboard from '@/components/DashboadComponent' ;

const routes = [

// path for determined page

{

path : '/register' ,

component : Register

} ,

{

path : '/login' ,

component : Login ,

name : 'login' ,

meta : {

auth : false

}

} ,

{

path : '/home' ,

component : Dashboard ,

name : 'home' ,

meta : {

auth : true

}

] ;

const router = new VueRouter ( {

mode : 'history' ,

routes : routes

} ) ;

export default router ;

Step 3 – Config vue-auth

Create a user.js file in resources

    <span class="token keyword">import</span> bearer <span class="token keyword">from</span> <span class="token string">'@websanova/vue-auth/drivers/auth/bearer'</span> <span class="token punctuation">;</span>
    <span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'@websanova/vue-auth/drivers/http/axios.1.x'</span> <span class="token punctuation">;</span>
    <span class="token keyword">import</span> router <span class="token keyword">from</span> <span class="token string">'@websanova/vue-auth/drivers/router/vue-router.2.x'</span> <span class="token punctuation">;</span>

    <span class="token keyword">const</span> config <span class="token operator">=</span> <span class="token punctuation">{</span>
        auth <span class="token operator">:</span> bearer <span class="token punctuation">,</span>
        http <span class="token operator">:</span> axios <span class="token punctuation">,</span>
        router <span class="token operator">:</span> router <span class="token punctuation">,</span>
        tokenDefaultName <span class="token operator">:</span> <span class="token string">'auth-token'</span> <span class="token punctuation">,</span>
        tokenStore <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'cookie'</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span>
        notFoundRedirect <span class="token operator">:</span> <span class="token punctuation">{</span>
            path <span class="token operator">:</span> <span class="token string">'/home'</span>
        <span class="token punctuation">}</span> <span class="token punctuation">,</span>
        registerData <span class="token operator">:</span> <span class="token punctuation">{</span>
            url <span class="token operator">:</span> <span class="token string">'/api/auth/register'</span> <span class="token punctuation">,</span>
            method <span class="token operator">:</span> <span class="token string">'POST'</span> <span class="token punctuation">,</span>
            redirect <span class="token operator">:</span> <span class="token keyword">null</span> <span class="token punctuation">,</span>
        <span class="token punctuation">}</span> <span class="token punctuation">,</span>
        loginData <span class="token operator">:</span> <span class="token punctuation">{</span>
            url <span class="token operator">:</span> <span class="token string">'/api/auth/login'</span> <span class="token punctuation">,</span>
            method <span class="token operator">:</span> <span class="token string">'POST'</span> <span class="token punctuation">,</span>
            redirect <span class="token operator">:</span> <span class="token string">'/home'</span> <span class="token punctuation">,</span>
            fetchUser <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span>
        <span class="token punctuation">}</span> <span class="token punctuation">,</span>
        logoutData <span class="token operator">:</span> <span class="token punctuation">{</span>
            url <span class="token operator">:</span> <span class="token string">'/api/auth/logout'</span> <span class="token punctuation">,</span>
            method <span class="token operator">:</span> <span class="token string">'POST'</span> <span class="token punctuation">,</span>
            redirect <span class="token operator">:</span> <span class="token string">'/login'</span> <span class="token punctuation">,</span>
            makeRequest <span class="token operator">:</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span> <span class="token punctuation">,</span>
        fetchData <span class="token operator">:</span> <span class="token punctuation">{</span>
            url <span class="token operator">:</span> <span class="token string">'/api/auth/user'</span> <span class="token punctuation">,</span>  
            method <span class="token operator">:</span> <span class="token string">'GET'</span> <span class="token punctuation">,</span>
            enabled <span class="token operator">:</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span> <span class="token punctuation">,</span>
        <span class="token function">parseUserData</span> <span class="token punctuation">(</span> <span class="token parameter">data</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> data <span class="token operator">||</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>
        <span class="token punctuation">}</span> <span class="token punctuation">,</span>
    <span class="token punctuation">}</span> <span class="token punctuation">;</span>

    <span class="token keyword">export</span> <span class="token keyword">default</span> config <span class="token punctuation">;</span>

import bearer from '@websanova/vue-auth/drivers/auth/bearer' ;

import axios from '@websanova/vue-auth/drivers/http/axios.1.x' ;

import router from '@websanova/vue-auth/drivers/router/vue-router.2.x' ;

const config = {

auth : bearer ,

http : axios ,

router : router ,

tokenDefaultName : 'auth-token' ,

tokenStore : [ 'cookie' ] ,

notFoundRedirect : {

path : '/home'

} ,

registerData : {

url : '/api/auth/register' ,

method : 'POST' ,

redirect : null ,

} ,

loginData : {

url : '/api/auth/login' ,

method : 'POST' ,

redirect : '/home' ,

fetchUser : true ,

} ,

logoutData : {

url : '/api/auth/logout' ,

method : 'POST' ,

redirect : '/login' ,

makeRequest : true

} ,

fetchData : {

url : '/api/auth/user' ,

method : 'GET' ,

enabled : true

} ,

parseUserData ( data ) {

return data || { }

} ,

} ;

export default config ;

Step 4 – App

app.js here it will be a file used for all components

    <span class="token keyword">import</span> <span class="token string">'./bootstrap'</span> <span class="token punctuation">;</span>
    <span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span> <span class="token punctuation">;</span>
    <span class="token keyword">import</span> router <span class="token keyword">from</span> <span class="token string">'./route'</span> <span class="token punctuation">;</span>
    <span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'@/components/AppComponent'</span>
    <span class="token keyword">import</span> VueAuth <span class="token keyword">from</span> <span class="token string">'@websanova/vue-auth'</span> <span class="token punctuation">;</span>
    <span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'axios'</span> <span class="token punctuation">;</span>
    <span class="token keyword">import</span> VueAxios <span class="token keyword">from</span> <span class="token string">'vue-axios'</span> <span class="token punctuation">;</span>
    <span class="token keyword">import</span> auth <span class="token keyword">from</span> <span class="token string">'./auth'</span> <span class="token punctuation">;</span>
    <span class="token keyword">import</span> VueRouter <span class="token keyword">from</span> <span class="token string">'vue-router'</span> <span class="token punctuation">;</span>

    Vue <span class="token punctuation">.</span> <span class="token function">use</span> <span class="token punctuation">(</span> VueAxios <span class="token punctuation">,</span> axios <span class="token punctuation">)</span> <span class="token punctuation">;</span>

    Vue <span class="token punctuation">.</span> router <span class="token operator">=</span> router <span class="token punctuation">;</span>
    App <span class="token punctuation">.</span> router <span class="token operator">=</span> Vue <span class="token punctuation">.</span> router <span class="token punctuation">;</span>
    Vue <span class="token punctuation">.</span> <span class="token function">use</span> <span class="token punctuation">(</span> VueRouter <span class="token punctuation">)</span> <span class="token punctuation">;</span>


    Vue <span class="token punctuation">.</span> <span class="token function">use</span> <span class="token punctuation">(</span> VueAuth <span class="token punctuation">,</span> auth <span class="token punctuation">)</span> <span class="token punctuation">;</span>

    <span class="token keyword">new</span> <span class="token class-name">Vue</span> <span class="token punctuation">(</span> App <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">$mount</span> <span class="token punctuation">(</span> <span class="token string">'#app'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

import './bootstrap' ;

import Vue from 'vue' ;

import router from './route' ;

import App from '@/components/AppComponent'

import VueAuth from '@websanova/vue-auth' ;

import axios from 'axios' ;

import VueAxios from 'vue-axios' ;

import auth from './auth' ;

import VueRouter from 'vue-router' ;

Vue . use ( VueAxios , axios ) ;

Vue . router = router ;

App . router = Vue . router ;

Vue . use ( VueRouter ) ;

Vue . use ( VueAuth , auth ) ;

new Vue ( App ) . $mount ( '#app' ) ;

Step 5

Create 1 AppComponent.vue

<span class="token operator">&lt;</span> template <span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"panel panel-default"</span> <span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"panel-heading"</span> v <span class="token operator">-</span> <span class="token keyword">if</span> <span class="token operator">=</span> <span class="token string">"$auth.check()"</span> <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span> top <span class="token operator">-</span> menu <span class="token operator">&gt;</span> <span class="token operator">&lt;</span> <span class="token operator">/</span> top <span class="token operator">-</span> menu <span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"panel-body"</span> <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span> router <span class="token operator">-</span> view <span class="token operator">&gt;</span> <span class="token operator">&lt;</span> <span class="token operator">/</span> router <span class="token operator">-</span> view <span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
<span class="token operator">&lt;</span> <span class="token operator">/</span> template <span class="token operator">&gt;</span>

<span class="token operator">&lt;</span> script <span class="token operator">&gt;</span>
<span class="token keyword">import</span> TopMenu <span class="token keyword">from</span> <span class="token string">'@/components/layouts/TopMenuComponent'</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  components <span class="token operator">:</span> <span class="token punctuation">{</span>
    TopMenu
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span> <span class="token operator">/</span> script <span class="token operator">&gt;</span>

< template >

< div class = "panel panel-default" >

< div class = "panel-heading" v - if = "$auth.check()" >

< top - menu > < / top - menu >

< / div >

< div class = "panel-body" >

< router - view > < / router - view >

< / div >

< / template >

< script >

import TopMenu from '@/components/layouts/TopMenuComponent'

export default {

components : {

TopMenu

}

< / script >

Step 6

Need to add a TopBar component to see who is currently logged in and performing the logout. This component is only available when the system has been authenticated using the v-if = “$ auth.check ()” function.

    <span class="token operator">&lt;</span> template <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span> nav <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"navbar navbar-dark bg-dark"</span> <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"logo"</span> <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> router <span class="token operator">-</span> link <span class="token operator">:</span> to <span class="token operator">=</span> <span class="token string">"{}"</span> <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"navbar-brand"</span> <span class="token operator">&gt;</span> Learning Laravel <span class="token operator">-</span> VueJs <span class="token operator">&lt;</span> <span class="token operator">/</span> router <span class="token operator">-</span> link <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"my-2 my-lg-0 dropdown navbar-right"</span> <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> a <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"nav-link dropdown-toggle"</span>
            href <span class="token operator">=</span> <span class="token string">"#"</span> id <span class="token operator">=</span> <span class="token string">"navbarDropdown"</span>
            role <span class="token operator">=</span> <span class="token string">"button"</span>
            data <span class="token operator">-</span> toggle <span class="token operator">=</span> <span class="token string">"dropdown"</span>
            aria <span class="token operator">-</span> haspopup <span class="token operator">=</span> <span class="token string">"true"</span>
            aria <span class="token operator">-</span> expanded <span class="token operator">=</span> <span class="token string">"false"</span> <span class="token operator">&gt;</span>
            <span class="token punctuation">{</span> <span class="token punctuation">{</span> $auth <span class="token punctuation">.</span> <span class="token function">user</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> name <span class="token punctuation">}</span> <span class="token punctuation">}</span>
          <span class="token operator">&lt;</span> <span class="token operator">/</span> a <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"dropdown-menu"</span> aria <span class="token operator">-</span> labelledby <span class="token operator">=</span> <span class="token string">"navbarDropdownMenuLink"</span> <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> a <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"dropdown-item text-black"</span> href <span class="token operator">=</span> <span class="token string">"#"</span> @click <span class="token operator">=</span> <span class="token string">"logout"</span> <span class="token operator">&gt;</span> Logout <span class="token operator">&lt;</span> <span class="token operator">/</span> a <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span> <span class="token operator">/</span> nav <span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span> <span class="token operator">/</span> template <span class="token operator">&gt;</span>

< template >

< nav class = "navbar navbar-dark bg-dark" >

< div class = "logo" >

< router - link : to = "{}" class = "navbar-brand" > Learning Laravel - VueJs < / router - link >

< / div >

< div class = "my-2 my-lg-0 dropdown navbar-right" >

< a class = "nav-link dropdown-toggle"

href = "#" id = "navbarDropdown"

role = "button"

data - toggle = "dropdown"

aria - haspopup = "true"

aria - expanded = "false" >

{ { $auth . user ( ) . name } }

< / a >

< div class = "dropdown-menu" aria - labelledby = "navbarDropdownMenuLink" >

< a class = "dropdown-item text-black" href = "#" @click = "logout" > Logout < / a >

< / div >

< / nav >

< / template >

Step 7

Create a new 1 RegisterComponent.vue

<span class="token operator">&lt;</span> template <span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"container"</span> <span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"card card-default"</span> <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"card-header"</span> <span class="token operator">&gt;</span> Register <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"card-body"</span> <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"alert alert-danger"</span> v <span class="token operator">-</span> <span class="token keyword">if</span> <span class="token operator">=</span> <span class="token string">"error &amp;&amp; !success"</span> <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> p <span class="token operator">&gt;</span> here was an error <span class="token punctuation">,</span> unable to complete registration <span class="token punctuation">.</span> <span class="token operator">&lt;</span> <span class="token operator">/</span> p <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
         <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"alert alert-success"</span> v <span class="token operator">-</span> <span class="token keyword">if</span> <span class="token operator">=</span> <span class="token string">"success"</span> <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> p <span class="token operator">&gt;</span> Registration completed <span class="token punctuation">.</span> You can now <span class="token operator">&lt;</span> router <span class="token operator">-</span> link <span class="token operator">:</span> to <span class="token operator">=</span> <span class="token string">"{name:'login'}"</span> <span class="token operator">&gt;</span> sign <span class="token keyword">in</span> <span class="token punctuation">.</span> <span class="token operator">&lt;</span> <span class="token operator">/</span> router <span class="token operator">-</span> link <span class="token operator">&gt;</span> <span class="token operator">&lt;</span> <span class="token operator">/</span> p <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> form autocomplete <span class="token operator">=</span> <span class="token string">"off"</span> @submit <span class="token punctuation">.</span> prevent <span class="token operator">=</span> <span class="token string">"register"</span> v <span class="token operator">-</span> <span class="token keyword">if</span> <span class="token operator">=</span> <span class="token string">"!success"</span> method <span class="token operator">=</span> <span class="token string">"post"</span> <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"form-group"</span> v <span class="token operator">-</span> bind <span class="token operator">:</span> <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"{ 'has-error': error &amp;&amp; errors.email }"</span> <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> label <span class="token keyword">for</span> <span class="token operator">=</span> <span class="token string">"name"</span> <span class="token operator">&gt;</span> Name <span class="token operator">&lt;</span> <span class="token operator">/</span> label <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> input type <span class="token operator">=</span> <span class="token string">"text"</span> id <span class="token operator">=</span> <span class="token string">"name"</span> <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"form-control"</span> v <span class="token operator">-</span> model <span class="token operator">=</span> <span class="token string">"name"</span> <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> span <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"help-block"</span> v <span class="token operator">-</span> <span class="token keyword">if</span> <span class="token operator">=</span> <span class="token string">"error &amp;&amp; errors.name"</span> <span class="token operator">&gt;</span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> errors <span class="token punctuation">.</span> name <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">&lt;</span> <span class="token operator">/</span> span <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"form-group"</span> v <span class="token operator">-</span> bind <span class="token operator">:</span> <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"{ 'has-error': error &amp;&amp; errors.email }"</span> <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> label <span class="token keyword">for</span> <span class="token operator">=</span> <span class="token string">"email"</span> <span class="token operator">&gt;</span> Email <span class="token operator">&lt;</span> <span class="token operator">/</span> label <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> input type <span class="token operator">=</span> <span class="token string">"email"</span> id <span class="token operator">=</span> <span class="token string">"email"</span> <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"form-control"</span> placeholder <span class="token operator">=</span> <span class="token string">" <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> "</span> v <span class="token operator">-</span> model <span class="token operator">=</span> <span class="token string">"email"</span> <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> span <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"help-block"</span> v <span class="token operator">-</span> <span class="token keyword">if</span> <span class="token operator">=</span> <span class="token string">"error &amp;&amp; errors.email"</span> <span class="token operator">&gt;</span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> errors <span class="token punctuation">.</span> email <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">&lt;</span> <span class="token operator">/</span> span <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"form-group"</span> v <span class="token operator">-</span> bind <span class="token operator">:</span> <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"{ 'has-error': error &amp;&amp; errors.password }"</span> <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> label <span class="token keyword">for</span> <span class="token operator">=</span> <span class="token string">"password"</span> <span class="token operator">&gt;</span> Password <span class="token operator">&lt;</span> <span class="token operator">/</span> label <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> input type <span class="token operator">=</span> <span class="token string">"password"</span> id <span class="token operator">=</span> <span class="token string">"password"</span> <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"form-control"</span> v <span class="token operator">-</span> model <span class="token operator">=</span> <span class="token string">"password"</span> <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> span <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"help-block"</span> v <span class="token operator">-</span> <span class="token keyword">if</span> <span class="token operator">=</span> <span class="token string">"error &amp;&amp; errors.password"</span> <span class="token operator">&gt;</span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> errors <span class="token punctuation">.</span> password <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">&lt;</span> <span class="token operator">/</span> span <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> button type <span class="token operator">=</span> <span class="token string">"submit"</span> <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"btn btn-default"</span> <span class="token operator">&gt;</span> Register <span class="token operator">&lt;</span> <span class="token operator">/</span> button <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> <span class="token operator">/</span> form <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
<span class="token operator">&lt;</span> <span class="token operator">/</span> template <span class="token operator">&gt;</span>

<span class="token operator">&lt;</span> script <span class="token operator">&gt;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">data</span> <span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      name <span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">,</span>
      email <span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">,</span>
      password <span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">,</span>
      error <span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">,</span>
      errors <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
      success <span class="token operator">:</span> <span class="token boolean">false</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span>
  methods <span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">register</span> <span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">this</span>
      <span class="token keyword">this</span> <span class="token punctuation">.</span> $auth <span class="token punctuation">.</span> <span class="token function">register</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
        url <span class="token operator">:</span> <span class="token string">'/api/auth/register'</span> <span class="token punctuation">,</span>
        params <span class="token operator">:</span> <span class="token punctuation">{</span>
          name <span class="token operator">:</span> app <span class="token punctuation">.</span> name <span class="token punctuation">,</span>
          email <span class="token operator">:</span> app <span class="token punctuation">.</span> email <span class="token punctuation">,</span>
          password <span class="token operator">:</span> app <span class="token punctuation">.</span> password
        <span class="token punctuation">}</span> <span class="token punctuation">,</span>
        <span class="token function-variable function">success</span> <span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
          app <span class="token punctuation">.</span> success <span class="token operator">=</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span> <span class="token punctuation">,</span>
        <span class="token function-variable function">error</span> <span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token parameter">resp</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
          app <span class="token punctuation">.</span> error <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span>
          app <span class="token punctuation">.</span> errors <span class="token operator">=</span> resp <span class="token punctuation">.</span> response <span class="token punctuation">.</span> data <span class="token punctuation">.</span> errors <span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token punctuation">,</span>
        redirect <span class="token operator">:</span> <span class="token keyword">null</span>
      <span class="token punctuation">}</span> <span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span> <span class="token operator">/</span> script <span class="token operator">&gt;</span>

< template >

< div class = "container" >

< div class = "card card-default" >

< div class = "card-header" > Register < / div >

< div class = "card-body" >

< div class = "alert alert-danger" v - if = "error && !success" >

< p > here was an error , unable to complete registration . < / p >

< / div >

< div class = "alert alert-success" v - if = "success" >

< p > Registration completed . You can now < router - link : to = "{name:'login'}" > sign in . < / router - link > < / p >

< / div >

< form autocomplete = "off" @submit . prevent = "register" v - if = "!success" method = "post" >

< div class = "form-group" v - bind : class = "{ 'has-error': error && errors.email }" >

< label for = "name" > Name < / label >

< input type = "text" id = "name" class = "form-control" v - model = "name" >

< span class = "help-block" v - if = "error && errors.name" > { { errors . name } } < / span >

< / div >

< label for = "email" > Email < / label >

< input type = "email" id = "email" class = "form-control" placeholder = " <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> " v - model = "email" >

< span class = "help-block" v - if = "error && errors.email" > { { errors . email } } < / span >

< / div >

< div class = "form-group" v - bind : class = "{ 'has-error': error && errors.password }" >

< label for = "password" > Password < / label >

< input type = "password" id = "password" class = "form-control" v - model = "password" >

< span class = "help-block" v - if = "error && errors.password" > { { errors . password } } < / span >

< / div >

< button type = "submit" class = "btn btn-default" > Register < / button >

< / form >

< / div >

< / template >

< script >

export default {

data : function ( ) {

return {

name : '' ,

email : '' ,

password : '' ,

error : false ,

errors : { } ,

success : false

}

} ,

methods : {

register : function ( ) {

var app = this

this . $auth . register ( {

url : '/api/auth/register' ,

params : {

name : app . name ,

email : app . email ,

password : app . password

} ,

app . success = true

} ,

error : function ( resp ) {

app . error = true ;

app . errors = resp . response . data . errors ;

} ,

redirect : null

} )

}

< / script >

Step 8

Next is LoginComponent.vue

    <span class="token operator">&lt;</span> template <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"container"</span> <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"card card-default"</span> <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"card-header"</span> <span class="token operator">&gt;</span> Sign In <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"card-body"</span> <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"alert alert-danger"</span> v <span class="token operator">-</span> <span class="token keyword">if</span> <span class="token operator">=</span> <span class="token string">"error"</span> <span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span> p <span class="token operator">&gt;</span> Sign <span class="token keyword">in</span> fail <span class="token punctuation">.</span> Please <span class="token keyword">try</span> again <span class="token operator">!</span> <span class="token operator">&lt;</span> <span class="token operator">/</span> p <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> form autocomplete <span class="token operator">=</span> <span class="token string">"off"</span> @submit <span class="token punctuation">.</span> prevent <span class="token operator">=</span> <span class="token string">"login"</span> method <span class="token operator">=</span> <span class="token string">"post"</span> <span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"form-group"</span> <span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span> label <span class="token keyword">for</span> <span class="token operator">=</span> <span class="token string">"email"</span> <span class="token operator">&gt;</span> <span class="token constant">E</span> <span class="token operator">-</span> mail <span class="token operator">&lt;</span> <span class="token operator">/</span> label <span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span> input type <span class="token operator">=</span> <span class="token string">"email"</span> id <span class="token operator">=</span> <span class="token string">"email"</span> <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"form-control"</span> placeholder <span class="token operator">=</span> <span class="token string">" <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> "</span> v <span class="token operator">-</span> model <span class="token operator">=</span> <span class="token string">"email"</span> required <span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"form-group"</span> <span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span> label <span class="token keyword">for</span> <span class="token operator">=</span> <span class="token string">"password"</span> <span class="token operator">&gt;</span> Password <span class="token operator">&lt;</span> <span class="token operator">/</span> label <span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span> input type <span class="token operator">=</span> <span class="token string">"password"</span> id <span class="token operator">=</span> <span class="token string">"password"</span> <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"form-control"</span> v <span class="token operator">-</span> model <span class="token operator">=</span> <span class="token string">"password"</span> required <span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span> button type <span class="token operator">=</span> <span class="token string">"submit"</span> <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"btn btn-default"</span> <span class="token operator">&gt;</span> Sign In <span class="token operator">&lt;</span> <span class="token operator">/</span> button <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> <span class="token operator">/</span> form <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span> <span class="token operator">/</span> template <span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span> script <span class="token operator">&gt;</span>
    <span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>

    <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
      <span class="token function-variable function">data</span> <span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
          email <span class="token operator">:</span> <span class="token keyword">null</span> <span class="token punctuation">,</span>
          password <span class="token operator">:</span> <span class="token keyword">null</span> <span class="token punctuation">,</span>
          error <span class="token operator">:</span> <span class="token boolean">false</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span> <span class="token punctuation">,</span>
      methods <span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">login</span> <span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">this</span>
          <span class="token keyword">this</span> <span class="token punctuation">.</span> $auth <span class="token punctuation">.</span> <span class="token function">login</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
            params <span class="token operator">:</span> <span class="token punctuation">{</span>
              email <span class="token operator">:</span> app <span class="token punctuation">.</span> email <span class="token punctuation">,</span>
              password <span class="token operator">:</span> app <span class="token punctuation">.</span> password
            <span class="token punctuation">}</span> <span class="token punctuation">,</span>
            <span class="token function-variable function">success</span> <span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token parameter">response</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
            <span class="token function-variable function">error</span> <span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
              app <span class="token punctuation">.</span> error <span class="token operator">=</span> <span class="token boolean">true</span>
            <span class="token punctuation">}</span> <span class="token punctuation">,</span>
          <span class="token punctuation">}</span> <span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token operator">&lt;</span> <span class="token operator">/</span> script <span class="token operator">&gt;</span>

< template >

< div class = "card-header" > Sign In < / div >

< p > Sign in fail . Please try again ! < / p >

< / div >

< form autocomplete = "off" @submit . prevent = "login" method = "post" >

< label for = "email" > E - mail < / label >

< / div >

< button type = "submit" class = "btn btn-default" > Sign In < / button >

< / form >

< / div >

< / template >

< script >

import Vue from 'vue'

export default {

return {

email : null ,

password : null ,

error : false

}

} ,

methods : {

login : function ( ) {

var app = this

this . $auth . login ( {

params : {

email : app . email ,

password : app . password

} ,

success : function ( response ) { } ,

error : function ( ) {

app . error = true

} ,

} )

}

< / script >

Step 9

Finally, HomeComponent. When the login is complete, the website will redirect to this page

<span class="token operator">&lt;</span> template <span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span> div <span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span> h1 <span class="token operator">&gt;</span> Home <span class="token operator">&lt;</span> <span class="token operator">/</span> h1 <span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
<span class="token operator">&lt;</span> <span class="token operator">/</span> template <span class="token operator">&gt;</span>
<span class="token operator">&lt;</span> script <span class="token operator">&gt;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    methods <span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token keyword">async</span> <span class="token function">created</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> token <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">const</span> tokenType <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> token <span class="token punctuation">.</span> token_type <span class="token punctuation">;</span>
            <span class="token keyword">const</span> accessToken <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> token <span class="token punctuation">.</span> access_token <span class="token punctuation">;</span>

            <span class="token keyword">let</span> authorization <span class="token operator">=</span> <span class="token string">''</span> <span class="token punctuation">;</span>

            <span class="token keyword">if</span> <span class="token punctuation">(</span> tokenType <span class="token operator">&amp;&amp;</span> accessToken <span class="token punctuation">)</span> <span class="token punctuation">{</span>
                authorization <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> tokenType  <span class="token interpolation-punctuation punctuation">}</span></span>   <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>  accessToken <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token template-punctuation string">`</span></span> <span class="token punctuation">;</span>
            <span class="token punctuation">}</span>

            axios <span class="token punctuation">.</span> defaults <span class="token punctuation">.</span> headers <span class="token punctuation">.</span> common <span class="token punctuation">[</span> <span class="token string">'Authorization'</span> <span class="token punctuation">]</span> <span class="token operator">=</span> authorization <span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span> <span class="token punctuation">,</span>
    <span class="token punctuation">}</span> <span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span> <span class="token operator">/</span> script <span class="token operator">&gt;</span>

< template >

< div >

< h1 > Home < / h1 >

< / div >

< / template >

< script >

export default {

methods : {

async created ( ) {

if ( this . token ) {

const tokenType = this . token . token_type ;

const accessToken = this . token . access_token ;

let authorization = '' ;

if ( tokenType && accessToken ) {

authorization = ` ${ tokenType } ${ accessToken } ` ;

}

axios . defaults . headers . common [ 'Authorization' ] = authorization ;

}

} ,

}

< / script >

4 Finish

Hope the article will bring a lot of things to you. To add motivation or like and subscribe (Upvote for me). Any questions please comment or below. Thank you for read.

Share the news now

Source : Viblo

Registration Log in using Laravel + VueJS

1. Introduction

2. Back end (Laravel)

Step 1

Step 2

Step 3

Step 4 Update Authentication Middleware

Step 5

Step 6 – Blade

3 Client (VueJs)

Step 1

Step 2 – Router

Step 3 – Config vue-auth

Step 4 – App

Step 5

Step 6

Step 7

Step 8

Step 9

4 Finish

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers