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

Question

How can I use guards to add a specific admin menu entry using guards? I know I can pass guard-"data" from controllers to view like in the docs mentioned:
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),
]
];
}),
]);
}
}
The question here is where is the controller for the AppLayout.vue file so I can accomplish this?

Answer 1

In this case i'll suggest you to share guards/permissions through HandleInertiaRequests.php file. I have used spatie/permissions to manage middlewares.
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() : '',
],
]
}
You can easilly access this data in vue template as $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>