Laravel、Inertia.js 和 vue，检查用户是否登录

Question

我正在使用 laravel 和惯性.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()];
    });
}

Answer 1

使用 Inertia，您可以创建 HandlerInertiaRequest Middlware。HandleInertiaRequests 中间件提供了“共享”方法，您可以在其中定义与每个 Inertia 响应自动共享的数据。在您的情况下，这就是登录的用户。

您可以在文档共享数据中找到更多信息。他们在演示应用程序存储库中有一个示例。

在您看来，您可以通过检查共享数据用户属性来检查用户是否已登录。

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