How to pass Role and permission from Laravel to vue.js - laravel-5

Question

I'm having some troubles, passing roles and permission 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> Nuevo
</button>
</div>
</div>
This is the error
Sorry for extending the question, but I am trying to be more detailed.

Answer 1

When adding the scripts in the common file such as app.blade.php, make sure you are adding the following script:
<script>
#auth
window.Permissions = {!! json_encode(Auth::user()->allPermissions, true) !!};
#else
window.Permissions = [];
#endauth
</script>
<script src="{{ asset('js/app.js') }}"></script>
IMPORTANT: Make sure you are adding it before your main js file e.g (public/js/app.js).