Check if User is Logged in Laravel Inertia & Vue js
2 years ago
admin
Laravel
In today's lesson, we are going to see how to check if a user is logged in using Laravel Inertia js & Vue js, let's assume that we have a menu and we want to display the login and registration links if the user is not logged in and the username and the logout link if he is logged in.
Update HandleInertiaRequests.php
First, let's update Middleware/HandleInertiaRequests.php here we get the logged-in user and make it available in the session.
<?php
namespace App\Http\Middleware;
use Illuminate\Http\Request;
use Inertia\Middleware;
class HandleInertiaRequests extends Middleware
{
/**
* The root template that's loaded on the first page visit.
*
* @see https://inertiajs.com/server-side-setup#root-template
* @var string
*/
protected $rootView = 'app';
/**
* Determines the current asset version.
*
* @see https://inertiajs.com/asset-versioning
* @param \Illuminate\Http\Request $request
* @return string|null
*/
public function version(Request $request): ?string
{
return parent::version($request);
}
/**
* Defines the props that are shared by default.
*
* @see https://inertiajs.com/shared-data
* @param \Illuminate\Http\Request $request
* @return array
*/
public function share(Request $request): array
{
return array_merge(parent::share($request), [
//
'user' => fn () => $request->user() ?
$request->user()->only(['id', 'name', 'email'])
: null,
]);
}
}
Get the current user
Inside, the Vue component we get the user from the session and we check if he exists we display the username and the logout link else we display the login and registration links.
<template>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<Link class="navbar-brand" :href="route('home')">Laravel App</Link>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<Link class="nav-link" aria-current="page"
:href="route('home')"><i class="fas fa-home"></i> Home</Link>
</li>
</ul>
<ul v-if="!user" class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<Link class="nav-link" aria-current="page"
:href="route('login')"><i class="fas fa-sign-in"></i> Login</Link>
</li>
<li class="nav-item">
<Link class="nav-link" :href="route('register')">
<i class="fas fa-user-plus"></i> Register</Link>
</li>
</ul>
<ul v-else class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<Link class="nav-link" aria-current="page"
href="#">
<i class="fas fa-user"></i> {{ user.name }}</Link>
</li>
<li class="nav-item">
<Link method="post" as="button"
class="nav-link border-0 bg-white" :href="route('logout')">
<i class="fas fa-sign-out"></i> Logout</Link>
</li>
</ul>
</div>
</div>
</nav>
<slot></slot>
</template>
<script setup>
import { Link, usePage } from '@inertiajs/vue3';
import { computed } from 'vue';
const user = computed(() => usePage().props.user);
</script>
<style>
</style>