Search code examples
laravelvue.jsinertiajslaravel-jetstream

Show div only if user has logged in - Laravel Vue Inertia Jetstream

I've created a webapp using Laravel Jetstream. I'm also using Vue and Inertia. Jetstream is dealing with the backend. A new user will land on Welcome.vue and upon loggin in, he will get to Dashboard.vue. This is my web.php:

Route::middleware([
    'auth:sanctum',
    config('jetstream.auth_session'),
    'verified',
])->group(function () {
    Route::get('/dashboard', function () {
        return Inertia::render('Dashboard', [
            'user' => Auth::user()
        ]);
    })->name('dashboard');
});

I'd like to simply show a message on the Dashboard navbar, like "Welcome, name". This would be just a test, as I'd want to show several buttons, texts and stuff to auth users only across different views.

Problem is, my Welcome and Dashboard views are almost identical, they're 95% made up of components. It look like this:

<script setup>
import { Head, Link } from '@inertiajs/inertia-vue3';
import Main_w_side from '../Components/Custom/main_w_side.vue';
import Navabar from '../Components/Custom/Navabar.vue';
import Our_team from '../Components/Custom/OurTeam.vue';
import Portfolio from '../Components/Custom/Portfoglio.vue';
import CustomFooter from '../Components/Custom/CustomFooter.vue';
import { provide } from 'vue'


defineProps({
    canLogin: Boolean,
    canRegister: Boolean,
    laravelVersion: String,
    phpVersion: String,
});



</script>

<template>
<Head title="Dashboard v0.1"/>
<Navabar class="bg-white shadow dark:bg-gray-800" />
<Portfolio/>
<Main_w_side/>
<Our_team/>
<CustomFooter/>
</template>

So the Navbar.vue that Dashboard uses is the same that Welcome uses. The same goes for portfolio, Main_w_side, Our_team,and such.

I know I should use the v-if method

<p class="pl-12" v-if="loggedIn">You're logged in</p>

to show a div if a certain condition is satisfied, but I haven't found any guidance online, as most of them refer to blade, or to webapps made without Jetstream (using a user controller which I don't currently have)

I was also thinking that I should probably use Provide/Inject to let every component across the web app know if the user visiting has logged in. But I still don't know how I would do that.

I feel like there has to be an industry standard for this that I'm not aware of, as virtually almost every website would need this feature (instead of re-creating whole pages just to have a different div somewhere)

Solution

  • There's no need for provide/inject and you are able to retrieve the authenticated user on every component, no matter how deep in the component tree the component is, using inertia's $page instance property or usePage() method.

    As @Abdullah Hejazy mentioned, in Vue2 and Vue3 you can simply do:

    <p v-if="$page.props.auth.user" class="pl-12">You're logged in</p>

    $page.props.auth.user will be null if the user isn't logged in. It is comming from the HandleInertiaRequests middleware.

    In Vue3 you can also do something like this:

    <script setup>
import { usePage, computed } from '@inertiajs/vue3'

const loggedIn = computed(() => {
   return !!usePage().props.auth.user
})
</script>

<template>
<p v-if="loggedIn" class="pl-12">You're logged in</p>
</template>