Laravel, inertial .js和vue，检查用户是否登录

Question

我使用laravel和inertial .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

使用惯性你可以创建一个HandlerInertiaRequest中间件。HandleInertiaRequests中间件提供了一个"共享"。方法，您可以在其中定义与每个惯性响应自动共享的数据。在您的示例中，是登录的用户。

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

在您的视图中，您可以通过检查共享数据用户prop来检查用户是否登录。

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

Answer 2

Laravel 8.4.0 with InertiaJS默认返回$page.props.user，如果用户登录(见此答案)。所以你可以直接输入

<element v-if="$page.props.user">This will only show when a user logged in.</element>

对于较新的版本，这里的答案是更好的实践。

Answer 3

我想你可以遵循在这个中间件中构建的相同方法，https://github.com/inertiajs/pingcrm/blob/master/app/Http/Middleware/HandleInertiaRequests.php然后将逻辑从提供程序中分离出来

Answer 4

安装inertiajs为$middlewareGroups web组增加了HandleInertiaRequests中间件。

在这个中间件的share方法中，你可以定义一个属性，在这个属性中写入用户在系统中的授权状态的布尔值。

例如:

public function share(Request $request): array
{
return array_merge(parent::share($request), [
'ziggy' => function () use ($request) {
return array_merge((new Ziggy)->toArray(), [
'location' => $request->url(),
]);
},
'auth.user.check' => fn () => (bool) $request->user(),
]);
}

在模板的后面，对于需要执行用户授权检查的所有页面，必须定义一个常量，例如isAuth。

*您可以读取从中间件传递的属性如下:page.props.auth.user

<script setup>
import { computed } from 'vue'
import { Link, usePage } from '@inertiajs/vue3'
const page = usePage()
const isAuth = computed(() => page.props.auth.user)
</script>

模板标签:

// ......
<Link v-if="isAuth" :href="route('profile')">Profile</Link>
<Link v-if="!isAuth" :href="route('login')">Login</Link>
// ......

因此，您可以定义任何参数，这些参数应该在应用程序中全局可用，或者应该在许多(大多数)页面上使用。

文档:https://inertiajs.com/shared-data。

检查工作:Laravel 10 + inertial - Laravel v.0.6.9

Answer 5

打开文件:appHttpMiddlewareHandleInertiaRequests.php

在这个文件中，你可以找到一个叫做share的方法，在这个方法中你可以返回任何你想要的东西。例如，您可以返回当前用户

的实例

public function share(Request $request): array
{
$user = auth()->user();
return array_merge(parent::share($request), [
'user' => $user
]);
}

现在在你的组件中，在data部分，你可以像这样访问用户变量:

data : function () {
return {
user : this.$page.props.user
}
}