Laravel 10应用程序，与Jetstream/惯性/Vue 3.
我使用laravel-spatie-permissions-vue来处理用户权限和角色，这些权限和角色都分配得很好。目前我使用默认的Jetstream视图，所以当用户登录到 Jmeter 板时， Jmeter 板会显示这些信息，我将其放在Components/Welcome.vue上：

<div v-if="is('administrator')">is administrator.</div>
<div v-if="is('user')">is user.</div>

出于测试的目的，有两个角色，管理员和用户，也有一些权限，但这两个角色都有同样的问题，让我们只使用角色。问题是，当你第一次登录时，让我们使用用户，什么都不显示，这是错误的。如果你刷新页面，“is user.”将出现，这是应该的。然后，如果你注销并使用管理员登录，将显示“is user.”（不正确），但如果刷新页面，将显示“is administrator.”（正确）。我在开发中使用valet和"npm run dev“时得到的行为与部署到apache服务器并执行”npm run build“时得到的行为相同。
我按照https://github.com/geowrgetudor/laravel-spatie-permissions-vue的所有说明操作。
我已经找了两天了，但是我没有发现任何人有同样的问题，我想我犯了一个愚蠢的错误。我认为这个问题应该与app.blade.php部分有关，也许它与缓存有关，但是没有发现任何类似的问题，所以在这一点上没有线索。
我尝试的内容（仅相关步骤）：

laravel new application
composer require laravel/jetstream
php artisan jetstream:install inertia
npm i @vitejs/plugin-vue
npm install -D tailwindcss postcss autoprefixer
composer require spatie/laravel-permission
php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider"
composer require geowrgetudor/laravel-spatie-permissions-vue

• 将trait添加到用户模型（User.php）：

use SpatiePermissionVue\Traits\RolesPermissionsToVue;

class User extends Authenticatable
{
    // ...
    use RolesPermissionsToVue;
}

• （app.js）导入并使用laravel-spatie-permissions-vue插件到app.js文件中：

import RolesPermissionsToVue from "../../vendor/geowrgetudor/laravel-spatie-permissions-vue/src/js";

// createInertiaApp, right after '.use(ZiggyVue, Ziggy)':
            .use(RolesPermissionsToVue)

• （app.blade.php）将Spatie角色和权限传递给app.blade.php中名为vueSpatiePermissions的全局变量：

<script type="text/javascript">
  window.vueSpatiePermissions = {!! auth()->check() ? auth()->user()->getRolesPermissionsAsJson() : 0 !!}
</script>

在Components/Welcome.vue上添加了以下内容：

<div v-if="is('administrator')">is administrator.</div>
<div v-if="is('user')">is user.</div>

我还以为用户登录后会显示“是管理员"或”是用户“，而不必刷新页面。
用户已正确分配角色和权限，可以在HandleInertiaRequests的share（）函数中添加以下代码进行检查：

$permissions = Auth::check() ? Auth::user()->permissions->pluck('name') : "";
        $roles = Auth::check() ? Auth::user()->roles->pluck('name') : "";
        return array_merge(parent::share($request), [
            'auth.user.permissions' => $permissions,
            'auth.user.roles' => $roles
        ]);

然后在视图中添加{{ $page.props.auth.user.roles }}或{{ $page.props.auth.user.permissions }}，所以这不是问题。
任何帮助都将不胜感激。谢谢。
最后，由于cengsemihsahin的回应，我改变了我的处理方式，最终我转到了How to Add Roles and Permission to Laravel Fortify + Inertia + vue?，在那里我使用了Viduranga的方法，因为这样就不需要laravel-apatie-permissions-vue或laravel-permission-to-vuejs，只需要在HandleInertiaRequests中更改share（）函数（这是我的）：

public function share(Request $request): array
    {
        $permissions = Auth::check() ? Auth::user()->permissions->mapWithKeys(function($pr){ return [$pr['name'] => true]; }) : [];
        $roles = Auth::check() ? Auth::user()->roles->mapWithKeys(function($pr){ return [$pr['name'] => true]; }) : [];
        return array_merge(parent::share($request), [
            'auth.user.permissions' => $permissions,
            'auth.user.roles' => $roles
        ]);
    }

那么你可以在你的视图中使用它：

v-if="$page.props.auth.user.roles['administrator']"

我认为这个解决方案比我在项目中使用的解决方案更好。