Check if User is Logged in Laravel Inertia & Vue js

1 year 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>

Related Tuorials

How to Prevent the Loop Incrementing Operator from Resetting Back to 1 in the Next Pagination Pages in Laravel

In this lesson, we will see how to prevent the loop incrementing operator from resetting back to 1 i...


How to Logout a User from the Other Devices in Laravel 11

In this lesson, we will see how to logout a user from the other devices in Laravel 11, sometimes you...


How to Logout a User from the Current Device in Laravel 11

In this lesson, we will see how to logout a user from the current device in Laravel 11, sometimes yo...


How to Import Multiple Classes from a Single Namespace in Laravel

In this lesson, we will see how to import multiple classes from a single namespace in Laravel by add...


Laravel 11 Livewire CRUD Application Tutorial Part 2

In the second part of this tutorial, we will display all the tasks on the home page and later we wil...


Laravel 11 Livewire CRUD Application Tutorial Part 1

This tutorial will show us how to create a Laravel 11 Livewire CRUD application. The user can c...


How to Conditionally Include a Blade Template in Laravel

In this lesson, we will see how to conditionally include a blade template in Laravel.Sometimes,...


How to Include a Blade Template Only if it Exists in Laravel

In this lesson, we will see how to include a blade template only if it exists in Laravel.Sometimes,&...


How to Pass a Variable to Include in Laravel

In this lesson, we will see how to pass a variable to include in Laravel. Sometimes, we want to pass...


How to the Get the Previous and Next Posts in Laravel

In this lesson, we will see how to get the previous and next posts in Laravel, sometimes when you ge...