Access Session data in Laravel 9 using Vuejs3 and InertiaJs

Question

I am working on my first Laravel project using Vuejs for the frontend. One of the functions of my app is to allow a Super admin to login as a User(impersonate). When I click the Impersonate Button, impersonate is added to Session so I can access it in the view. This works in my other Laravel/Blade projects.

Pages/Users/Index.vue

...
<Link @click="impersonate(user.id)">Impersonate</Link>
... 
<script>
...
methods: {
    impersonate(id) {
        this.$inertia.post(route("user.impersonate", id));
    },
},
...
</script>

UserController.php

...
public function impersonate(User $user)
{
    /*if(! is_null(auth()->user()->account_id)) {
        return;
    }*/

    $originalId = auth()->user()->id;
    session()->put('impersonate', $originalId);
    auth()->loginUsingId($user->id);

    return redirect('/users');
}
...

Impersonation works and I can successfully login as other Users, but I can't figure out how to access Session data inside Vue so I can show a block with a logout link--with Blade I would simply write:

@if(session()->has('impersonate'))
    ...
        <div>
            You are impersonating {{auth()->user()->name}}
        </div>
        <div>
            <a href="{{route('leave-impersonation')}}">
                Leave Impersonation
            </a>
        </div>
    ...
@endif

How can I write the if part in Vue?

ericmp · Accepted Answer · 2022-09-05 15:24:41Z

2

To access that variable in your components, you previously have to share it in HandleInertiaRequests middleware.

For example, here I'm getting logged user's email in the template:

<template>
  {{ $page.props.auth.user.email }}
</template>

If you want to access that prop in the script side you'll have to use usePage.

Example of getting logged user's email in the script section (example made using Vue3 composition API, but you can fit it into your needs):

<script setup>
  import { usePage } from '@inertiajs/inertia-vue3'

  const userEmail = usePage().props.value.auth.user.email
</script>

edited Sep 5, 2022 at 15:24

answered Sep 5, 2022 at 15:12

ericmp

2,41911 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

Access Session data in Laravel 9 using Vuejs3 and InertiaJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related