Laravel - Jetstream (InertiaJS) - 在顶部 header 菜单中使用守卫 (AppLayout.vue)

Laravel - Jetstream (InertiaJS) - using guards in the top header menu (AppLayout.vue)

如何使用 guards 添加特定的 admin 菜单条目 使用 guards?我知道我可以像 docs 提到的那样从控制器传递 guard-“data” 来查看:

class UsersController extends Controller
{
    public function index()
    {
        return Inertia::render('Users/Index', [
            'can' => [
                'create_user' => Auth::user()->can('users.create'),
            ],
            'users' => User::all()->map(function ($user) {
                return [
                    'first_name' => $user->first_name,
                    'last_name' => $user->last_name,
                    'email' => $user->email,
            //THIS BELOW IS THE GUARD-DATA
                    'can' => [
                        'edit_user' => Auth::user()->can('users.edit', $user),
                    ]
                ];
            }),
        ]);
    }
}

这里的问题是 AppLayout.vue 文件的控制器在哪里,以便我可以完成此操作?

在这种情况下,我建议您通过 HandleInertiaRequests.php 文件共享 guards/permissions。我已经使用 spatie/permissions 来管理中间件。

public function share(Request $request)
{
   return array_merge(parent::share($request), [
    'auth' => [
       'user' => [
           'id' => $request->user()->id ?? '',
           'name' => $request->user()->name ?? '',
           'permissions' => $request->user() ? 
           $request->user()->getPermissionNames() : '',
        ],
    ]
}

您可以在 vue 模板中以 $page.props.auth.user.permissions 的形式轻松访问此数据。

<template>
  <div v-if="can('edit-post')">
   //Edit Post
  <div>
<template>

<script>
  methods:{
    can(permission){
     // Check Permissions
     let data = this.$page.props.auth.user.permissions
     .filter((ability) => ability === permission);
      return data.length > 0 ? true : false;
    }
  }
<script>