DEV Community

Roles y permisos en Laravel con Inertia.js

Genaro Hernández on September 16, 2021

En cualquier proyecto es muy común la utilización de roles y permisos. Existen muchos ejemplos de realizar esta funcionalidad en un proyecto Larave...
Read full post
Collapse
 
mreduar profile image
Eduar Bastidas •

Buenisimo Genaro, gracias por compartir, me ayudo mucho

Collapse
 
mreduar profile image
Eduar Bastidas • • Edited

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
Enter fullscreen mode Exit fullscreen mode

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?

Collapse
 
eduloper profile image
Genaro Hernández •

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.

Thread Thread
 
mreduar profile image
Eduar Bastidas •

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

Thread Thread
 
eduloper profile image
Genaro Hernández •

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.

Thread Thread
 
eduloper profile image
Genaro Hernández • 
<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>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jeffreynrock891 profile image
jeffreynrock891 •

hola amigo muy buen post pero tenia un par de dudas, si quiero agregar mas roles a un link como podria hacer ejempleto en este link que tienes aqui:

, quisiera que ingresara tambien otro rol, muchas gracias.
Collapse
 
eduloper profile image
Genaro Hernández •

En la documentación de Vue Gates puedes encontrar mas alternativas de aplicación.

<button v-role:any="'writer|admin'">Add Article</button>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
danilo2981 profile image
Dan Vega •

Hola puedes poner el articulo sobre Laravel Permission por favor

Collapse
 
sancheznicolas profile image
Nicolas Delfor, Sanchez • • Edited

se puede adaptar para vue 2.5???

Collapse
 
eduloper profile image
Genaro Hernández •

Según la documentación de Vue Gates e Inertia JS, son compatibles con Vue 2

Collapse
 
cacz18 profile image
Carlos Carrera •

Hola Genaro, un agrado leer tu articulo, pero me he quedado con una duda, como integras vue-gates al proyecto? he tenido problemas con esa parte, puedes especificar un poco más?

Collapse
 
eduloper profile image
Genaro Hernández •

Que tal Carlos, claro que si. Voy agregar ese detalle. Dame hasta mañana por favor que ando un poco atareado.

Collapse
 
needwit profile image
needwit •

Y como consulto un permiso?