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

Answer 1

You can use this format in Vuejs for Laravel Permission:

add function to User Model to get all user permissions&roles like this:

class User extends Authenticatable
{
    // ...

    public function jsPermissions()
    {
        return json_encode([
                'roles' => $this->getRoleNames(),
                'permissions' => $this->getAllPermissions()->pluck('name'),
            ]);
    }
}

pass this data to JavaScript in HTML header:

in app.js file add global Vuejs can function to check user permissions and is function to check user roles:

Vue.prototype.can = function(value){
    return window.Laravel.jsPermissions.permissions.includes(value);
}
Vue.prototype.is = function(value){
    return window.Laravel.jsPermissions.roles.includes(value);
}

https://github.com/ahmedsaoud31/laravel-permission-to-vuejs