使用Vuejs3和InertiaJs访问Laravel 9中的会话数据

Question

我正在用Vuejs做我的第一个Laravel项目。我的应用程序的一个功能是允许超级管理员以用户身份登录(模拟)。单击Impersonate Button时，impersonate将添加到会话中，以便在视图中访问它。这在我的其他Laravel/Blade项目中是可行的。

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');
}
...

模拟可以工作，我可以作为其他用户成功地登录，但我不知道如何访问Vue内部的会话数据，因此我可以用注销链接显示一个块--使用Blade，我只需编写：

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

如何用Vue编写if部件？

Answer 1

要在组件中访问该变量，您以前必须在HandleInertiaRequests中间件中共享它。

例如，在模板中记录用户的电子邮件：

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

如果您想在脚本端访问这个支柱，就必须使用usePage。

在脚本部分获得用户电子邮件记录的示例(使用Vue3 composition API制作的示例，但您可以根据您的需要来使用它)：

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

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