Laravel10+Jetstream/Inertia/Vue3中laravel-spatie-permissions-vue需刷新生效问题

问题场景 #

• 技术栈：Laravel 10 + Jetstream/Inertia/Vue3，使用laravel-spatie-permissions-vue处理用户角色与权限
• 权限分配逻辑正常，但存在两个异常：
  • 用户首次登录后，Vue组件中通过<div v-if="is('administrator')">is administrator.</div>无法正确渲染角色对应内容，必须刷新页面才生效
  • 切换用户登录时，前端仍显示上一用户的角色权限内容，刷新后才会更新

已完成的配置 #

严格按照laravel-spatie-permissions-vue官方文档完成所有配置步骤：

• 完成项目初始化及依赖安装
• 给User模型添加HasRoles Trait
• 配置app.js及app.blade.php相关内容
• 通过HandleInertiaRequests的share()方法确认，用户角色权限数据已正确传递至前端

解决方案 #

修改app/Http/Middleware/HandleInertiaRequests.php中的share()方法，不再依赖laravel-spatie-permissions-vue，直接将角色、权限转换为键值对格式传递到前端：

public function share(Request $request): array
{
    return array_merge(parent::share($request), [
        'auth' => [
            'user' => $request->user() ? [
                // 保留原有用户字段，新增以下角色、权限处理
                'roles' => $request->user()->roles->pluck('name')->mapWithKeys(function ($role) {
                    return [$role => true];
                })->toArray(),
                'permissions' => $request->user()->permissions->pluck('name')->mapWithKeys(function ($permission) {
                    return [$permission => true];
                })->toArray(),
            ] : null,
        ],
    ]);
}

之后在Vue组件中直接通过$page.props.auth.user.roles['administrator']判断角色（权限同理），无需使用laravel-spatie-permissions-vue提供的is()方法：

<div v-if="$page.props.auth.user.roles['administrator']">is administrator.</div>

修改后，首次登录、切换用户时角色权限都会实时更新，无需刷新页面即可正确显示对应内容。

内容的提问来源于stack exchange，提问作者John