Vue.js with Laravel Permission

Question

I am in the process of integrating Laravel Permission API with Vue.JS frontend. I am using https://github.com/spatie/laravel-permission library for Laravel Permission. I am not understanding how can I check permission in the Vue JS front End (In Laravel blade I am using @Can to check the permission).

Answer 1

I will do a ajax call to check for permissions instead , something like this, but of cours eyou need to modify it to cater your needs.

Routes:

Route::get('/permission/{permissionName}', 'PermissionController@check');

Controller:

function check($permissionName) {
   if (! Auth::user()->hasPermissionTo($permissionName)) {
        abort(403);
   }
   return response('', 204);
}

Vue: (if you wanna do this synchronously), this is a simple example (Vue global mixin), you can turn this into Vue directive or component.

Vue.mixin("can", (permissionName) => {
    let hasAccess;
    axios.get(`/permission/${permissionName}`)
        .then(()=> {
            hasAccess = true;
        }
        .catch(()=> {
            hasAccess = false;
        };
    return hasAccess;
});

And then everytime you wanna check permission, you can just do

<el-input v-if="can('write-stuff')"> </el-input>

Answer 2

I'm literally working on this exact same thing. I'm thinking of adding a custom Vue directive that would check against the Laravel.permissions array.

It might even be as simple as

 Vue.directive('can', function (el, binding) {
  return Laravel.permissions.indexOf(binding) !== -1;
})

I haven't tested this code. Just brainstorming here.

<button v-can="editStuff">You can edit this thing</button>

I can hold permissions this way:

window.Laravel = <?php echo json_encode([
                'csrfToken' => csrf_token(),
                'userId' => Auth::user()->id,
                'permissions' => Auth::user()->permissions()->pluck('name')->toArray()
            ]); ?>