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

Question

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)

you can use v-if method with your component or use v-show <Portfolio v-show="loggedIn" /> ... vuejs.org/guide/essentials/conditional.html#v-if-on-template — Win
– Win, Commented Jan 20, 2023 at 12:22

Matheus Dal'Pizzol · Accepted Answer · 2023-01-31 12:26:17Z

1

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>

answered Jan 31, 2023 at 12:26

Matheus Dal'Pizzol

6,1253 gold badges24 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AbdullahHejazi · Accepted Answer · 2023-01-20 17:58:33Z

0

As per the default InertiaJS installation, you should be able to do something like this:

v-if="$page.props.auth.user"

so your code should look like this:

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

answered Jan 20, 2023 at 17:58

AbdullahHejazi

3222 silver badges12 bronze badges

1 Comment

Marco Rifo Over a year ago

I've tried it and am getting a "Cannot read properties of undefined (reading 'user')"

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related