Laravel Solution: How to pass Role and permission from Laravel to vue.js

dimanche 9 juin 2019

How to pass Role and permission from Laravel to vue.js

Helllo again

I'm having som troubbles, passing roles and perrmission fo authenticated users to vue components. My goal is restrict some elements, create, edit, delete buttons eg.

I've followed this tutorial: https://mmccaff.github.io/2018/11/03/laravel-permissions-in-vue-components/?fbclid=IwAR1Oja6yESRJS65huRXPa9SwO2oQdP3W8TwhE_pReUtaK_8rnVAOzixzwXM But I have not success.

Here is part of my code:

RolesAndPermissionsSeeder

 // create permissions
        //Categorias
        Permission::create(['name' => 'create category']);
        Permission::create(['name' => 'update category']);
        Permission::create(['name' => 'list categories']);
        Permission::create(['name' => 'desactivate category']);
        Permission::create(['name' => 'activate category']);
        Permission::create(['name' => 'delete category']);
        //Tareas
        Permission::create(['name' => 'create task']);
        Permission::create(['name' => 'update task']);
        Permission::create(['name' => 'list tasks']);
        Permission::create(['name' => 'desactivate task']);
        Permission::create(['name' => 'activate task']);
        Permission::create(['name' => 'delete task']);
    //Tareas de planificador
            $role = Role::create(['name' => 'planificador']);
                $role->givePermissionTo(['list tasks']);
                $role->givePermissionTo(['list categories']);
            // or may be done by chaining
            //TAreas de Aministrador
            $role = Role::create(['name' => 'admin']);
                //Categorias
                $role->givePermissionTo(['create category']);
                $role->givePermissionTo(['list categories']);
                $role->givePermissionTo(['update category']);
                $role->givePermissionTo(['desactivate category']);
                $role->givePermissionTo(['activate category']);

I can limit to users, only menus, but when they access to list e.g. categories list, inside of they have the option of creating and the can even if their role doesn't have this option. this is my admin panel.

In my user model, I have the function to get permissions app/User.php:

public function getAllPermissionsAttribute() {
    $permissions = [];
    foreach (Permission::all() as $permission) {
        if (Auth::user()->can($permission->name)) {
            $permissions[] = $permission->name;
        }
    }
    return $permissions;
}

In my principal.blade.php, I've put javascript array ......

 </footer>

    <!-- Bootstrap and necessary plugins -->
    <script src="js/app.js"></script>
    <script src="js/plantilla.js"></script>
    <script>
        window.Laravel = {!! json_encode([
        'csrfToken' => csrf_token(),
        'user' => Auth::user()
    ]) !!};
    </script>

</body>

</html>

My mixin Permissions.vue

<script>
    export default {
        methods: {
            $can(permissionName) {
                return Permissions.indexOf(permissionName) !== -1;
            },
        },
    };
</script>

Imported in app.js (then compiled)

import Permissions from './mixins/Permissions';
Vue.mixin(Permissions);

Finally, the can restriction in my component Categoria.vue

 <div class="card">

            <div class="card-header">
                <i class="fa fa-align-justify"></i> Categorías
                <div v-if="$can('create category')">
                    <button type="button" @click="abrirModal('categoria', 'registrar')" class="btn btn-secondary">
                        <i class="icon-plus"></i>&nbsp;Nuevo
                    </button>
                </div>
            </div>

This is the error