API Authentication Using Laravel 9 Sanctum and Vue js 3 Part 3

1 year ago admin Laravel

In the third part of this tutorial, we are going to finish with our API Authentication system and we will add API and web routes.

Update app.js

Inside app.js we import the Main component and we register it as a global component.

show or hide the code

                                                    
                                                                                                                import './bootstrap';

import {createApp} from 'vue/dist/vue.esm-bundler.js';
import Main from '@/components/Main.vue';
import router from '@/router';
import { createPinia } from 'pinia';

const app = createApp({});
const pinia = createPinia();

app.component('app-component', Main);

app.use(router);
app.use(pinia); 

app.mount("#app");

Create the app.blade.php file

Inside views, the structure of our files will be like this:

> views

> layouts

app.blade.php

home.blade.php

show or hide the code

                                                        
                                                                                                                        <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!-- Fontawesome CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>@yield('title')</title>
  </head>
  <body class="bg-light">
    <div id="app">
        @yield('content')
    </div>
    @vite('resources/js/app.js')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>  
</body>
</html>

Create the home.blade.php

The content of the file home.blade.php:

show or hide the code

                                                        
                                                                                                                        @extends('layouts.app')

@section('content')
    <app-component></app-component>
@endsection

Add the API routes

Inside api.php we add the routes.

show or hide the code

                                                        
                                                                                                                        <?php

use App\Http\Controllers\Api\UserController;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::middleware('auth:sanctum')->group(function() {
    Route::get('logout', [UserController::class, 'logout']);
});

Route::post('login', [UserController::class, 'auth']);

Add the WEB routes

Inside web.php we add the routes and now everything should work as expected you can see a demo here.

show or hide the code

                                                        
                                                                                                                        <?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('{any}', function () {
    return view('home');
})->where('any','.*');