People searching “Laravel gate Vue button” hide the button and stop. The POST still runs. Share a boolean for the button, and keep authorize on the write. The policy guide defines update.
TL;DR
- Share the gate as a boolean.
- The controller still calls authorize on the POST.
- Do not send the whole gate map, or the user model, so the page can call
canitself. - Do not hide the button with CSS.
The fix#
return Inertia::render('posts/Show', [
'post' => $post->only(['id', 'title']),
'canUpdate' => $request->user()?->can('update', $post),
]);<button v-if="canUpdate" type="button" @click="edit">Edit</button>can runs the same policy the controller will run. The boolean is a copy from the last response. It goes stale if a teammate changes the owner’s id. The next POST still checks.
What to avoid#
Gotcha
Do not send the whole gate map, or the user model, so the page can call can itself. Vue cannot see the policy. Do not hide the button with CSS. v-if removes it. A person can still POST, which is why the controller check stays.
FAQ#
How do I hide a Vue button with a gate?
Share the gate as a boolean. The controller still calls authorize on the POST.
What goes wrong with Laravel gate Vue button?
Many developers hide the button and stop. Do not send the whole gate map, or the user model, so the page can call can itself.
