Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

anchan42's avatar

Authorisation Blade directives and Vue equivalent

I am thinking about using Vue instead of Blade in the next update of my app. Just wondering how I deal with authorisation in Vue. Currently, I use Blade directives like @can to hide or show UI components according to authorisation checks.

How could I do the same with Vue?

0 likes
5 replies
madhansuresh's avatar

Unfortunately, I don't see any other way other than passing rights with the user object to Vue as a "can" array of props and using them to show/hide UI components in Vue. It would have been much easier if we had @can or @cannot directives same as Blade implemented in Vue.

martinbean's avatar

@madhansuresh It will never be possible as the client (the browser) simply cannot be trusted.

Authorisation has to come from the server, otherwise a user could just change any “is admin” checks to true and become an administrator.

1 like
anchan42's avatar

I put this in HandleInertiaRequests Middleware so the permissions are available automatically on the front end.

            'auth' => [
                'user' => fn () => $request->user(),
                'permissions' => fn () => $request->user()?->getAllPermissions()->pluck('name')
            ],

and then wrote a helper function to check the permission:

function hasPermission(permissions, permissionToTest) {
  let hasPermission = false;
  permissions.forEach((permission) => {
    if (permission === permissionToTest) {
      hasPermission = true;
    } else if (permission.includes(".*")) {
      const permissionParts = permission.split(".");
      const permissionToTestParts = permissionToTest.split(".");
      if (
        permissionParts.length === permissionToTestParts.length &&
        permissionParts[0] === permissionToTestParts[0]
      ) {
        hasPermission = true;
      }
    }
  });
  return hasPermission;
}

Now I can test permissions in Vue using something like hasPermission($page.props.auth.permissions, 'user.index'). It works perfect.

Would it be possible to have $page.props.auth.permissions available to the function automatically so I don't have to pass it in every time?

1 like

Please or to participate in this conversation.