People searching “Spatie permission middleware Vue” check v-if="can('posts.update')" in the page and never register the middleware. The permissions guide installs the package and shares a boolean. This page is the route.
TL;DR
- role and permission middleware refuse the request.
- The Vue page only receives a boolean it can show.
- Do not spell the permission differently in the seeder and the route.
- Do not grant it from the Vue page.
The fix#
Publish and migrate are in that guide. The alias belongs in bootstrap/app.php if it is not registered yet:
$middleware->alias([
'role' => \Spatie\Permission\Middleware\RoleMiddleware::class,
'permission' => \Spatie\Permission\Middleware\PermissionMiddleware::class,
]);Route::post('/posts', [PostController::class, 'store'])
->middleware(['auth', 'permission:posts.update']);A user without posts.update gets a 403 before the controller. The Vue page can still hide the button from the boolean the permissions guide shares. Hiding is not this middleware.
What to avoid#
Gotcha
Do not spell the permission differently in the seeder and the route. posts.update and post.update are two permissions. Do not grant it from the Vue page.
FAQ#
How do I put a permission on the route?
role and permission middleware refuse the request. The Vue page only receives a boolean it can show.
What goes wrong with Spatie permission middleware Vue?
Many developers check `v-if="can('posts. Do not spell the permission differently in the seeder and the route.
