我正在使用 laravel 和 inertia.js 来实现我的项目。在我的导航栏中,如果用户已登录,我想显示带有一些用户详细信息的 div 元素。如果用户未登录,则不应显示 div。我已经尝试过了,但它在我登录或登录时都没有显示详细信息 当我不在的时候。我该怎么办?
<div class="ml-3 relative" v-if="$page.props.auth.user">
<div>
<button @click="dropDown=true"
class="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
id="user-menu" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full object-cover" :src="$page.props.user.profile_photo_url"
:alt="$page.props.user.name"/>
</button>
</div>
<div v-if="dropDown"
class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5"
role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
<form method="POST" @submit.prevent="logout">
<jet-responsive-nav-link as="button">
Logout
</jet-responsive-nav-link>
</form>
</a>
</div>
</div>
在 AppServiceProvider 上
public function boot()
{
//check if user is logged in
Inertia::share('auth.user', function() {
return ['loggedIn' => Auth::check()];
});
}
最佳答案
使用 Inertia,您可以创建一个 HandlerInertiaRequest 中间件。 HandleInertiaRequests 中间件提供了一种“共享”方法,您可以在其中定义与每个 Inertia 响应自动共享的数据。在您的情况下,这就是登录的用户。
您可以在文档中找到更多信息 Shared Data . 他们在演示应用程序中有一个示例 repository .
在您看来,您可以通过检查共享数据用户属性来检查用户是否已登录。
v-if="$page.props.auth.user"
关于Laravel、Inertia.js 和 vue,检查用户是否登录,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66080777/