Discussion on: Roles y permisos en Laravel con Inertia.js

View post

Replies for: Buenisimo Genaro, gracias por compartir, me ayudo mucho

Hola @genarohv Vengo aqui porque fue donde segui el tutorial para implementarlo, estoy requiriendo utilizar las directivas como funciones, por ejemplo

this.$gates.getRoles(); // ['writer']
this.$gates.hasRole('admin'); // false

Pero esto no se puede utilizar en Vue 3 asi como asi porque ni this ni $gates son variables en el nuevo Composition API de Vue 3

¿Tienes alguna idea de como implementarlo?

Genaro Hernández • Mar 31 '22

Hola Eduar, puedes inspeccionar o descargar el código en GitHub, esta basado en Vue 3.2, recuerda que para que funcione VueGates debes de crear un mixin (plugin). Espero que te sirva de guía el repositorio.

Eduar Bastidas • Mar 31 '22

Hello, en todo el proyecto las unicas partes donde utilizas this.$gates es a la hora de configurarlo prnt.sc/JnKUPrV8l-h_ , y eso esta bien a mi me funciona, el problema como te mencione en este comentario es a la hora de utilizarlo en el script, en el template no tengo problema

Genaro Hernández • Mar 31 '22

Recién logro entenderte, no lo he utilizado como método como indica la documentación de Vue Gate, solo lo he utilizado como directiva. Pero recuerda que puedes aplicar un script de Composition Api y otro de Option Api en un mismo archivo vue 3.*; no he realizado las pruebas por falta de tiempo, pero quizá en la documentación oficial puedas encontrar una solución.

Genaro Hernández • Mar 31 '22

<script>
import { usePage } from '@inertiajs/inertia-vue3'
export default {
    created() {
        const roles = usePage().props.value.auth.roles;
        const permissions = usePage().props.value.auth.permisos;
        this.$gates.setRoles(roles);
        this.$gates.setPermissions(permissions);

        this.soyAdmin();
    },
    methods: {
        soyAdmin(){
            if(this.$gates.hasRole('admin')){
                console.log("soy admin");
            }else{
                console.log("no soy admin");
            }
        }
    }
}
</script>