Level 10
Check the stack post link for the screenshot if it helps.
Nov 14, 2022
2
Level 10
Help using spatie Laravel-permission package with Vue
I have been trying to implement the spatie package Laravel-permissions into a Javascript page prop so I can check if a user is admin to display a link to the admin page.
I am using Laravel Jetstream as my starter package with the Vue & Inertia install.
So I am able to set middleware that checks if a user has a role, and then set page props from there, which I can use in Vue to do a v-if on a link to check if the $page.prop.value is set to true.
When I was doing this I noticed in the user props on the page there is already a roles sub item in the props that contains an array of strings for each of the roles a user has been set.
I am new to javascript in general, but can work my way through most of what I need.
However I am unable to work out how I can do the following:
1 - check if a page prop existing in the user > roles array that contains the name "Admin"
2 - use that in a v-if statement to display a link to the admin page.
I know the way I have been doing it work, but using the props that are generated by the spatie package is much cleaner so please help me figure it out.
Level 18
Hi,
I would argue that you should strip away the extraneous data of the roles object and have a flat array of only the role names. With that you can do v-if="this.$page.props.user.role.includes('Admin') on the element of your choice.
In my projects, I build that object to reflect the Laravel and Spaties 'can' method - so in my HandleInertiaRequest in the share method I build this
// simplified version of a previous project I did
'user' => [
'can' => [
'roles' => Auth::user()->roles->map(function ($role){
return [
'name' => $role->name,
.....
and on my desired element to toggle with v-if
<div v-if="$page.props.user.can.roles.includes('Admin')">.....
Hope this helps a bit.
Happy coding.
Please or to participate in this conversation.