API Authentication Using Laravel 9 Sanctum and Vue js 3 Part 3
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.
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
<!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:
@extends('layouts.app')
@section('content')
<app-component></app-component>
@endsection
Add the API routes
Inside api.php we add the routes.
<?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.
<?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','.*');