Hey I want to send user role(using Spatie) as props with backend in every route to show different views based on role and permissions in Vuejs.
<!-- Navigation Links -->
<div v-if="user.role == 'admin'" class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex max-w-xl md:max-w-7xl flex-wrap justify-around">
<NavLink :href="route('dashboard')" :active="route().current('dashboard')">
Dashboard
</NavLink>
</div>
even if could send user role in every route by a middleware or something like that would be good.
do you have any idea?
2
Answers
I used https://inertiajs.com/shared-data.
Considering you’ve already created the required relations so i’m shooting this one in the dark.
Lets say you created the roles and associated them with users, you can get the user roles with something like this:
Once that’s done then in your ajax call or vue router to intercept the request and then check the user roles to render vue js components based on the required role. You can do something like this in your vuejs :
// Vue router/index.js
This way you can easily render the required pages based on the roles. You can easily modify it according to your requirement it’s not accurate but this can give you an idea how to implement it.