Composable y Plugin de permisos en Vue 3 utilizando Inertia.js
Es cierto que existen dependencias que podemos instalar con cualquier gestor de paquetes para Node.js que nos permiten desarrollar un sistema de permisos en Vue 3, pero también es cierto que si podemos hacer nosotros algunas cosas que después no conlleven una actualización o tener demasiadas cosas sin utilizar en nuestros proyectos, pues mucho mejor.
En este tutorial vamos a ver un paso a paso completo para aprender a desarrollar un composable y un plugin de permisos en Vue 3 utilizando Laravel con el stack Inertia.js, la idea es simple, poder controlar qué pueden hacer nuestros usuarios en el cliente con Vue 3 utilizando Composition Api.
Modelos, migraciones, factorías y seeders
Hasta este punto no deben haber dudas, simplemente hemos creado un modelo de datos con algunos datos falsos que nos permitirán más adelante llevar a cabo nuestro ejemplo.
Compartiendo datos entre Laravel y Vue con Inertia.js
El Middleware HandleInertiaRequests se encarga de manejar las peticiones cuando trabajamos con Inertia.js. Uno de sus métodos se llama share, y nos permite compartir datos de forma global entre Laravel y Vue.
Con el anterior código ya estamos compartiendo datos de forma global con Vue, en este caso los permisos que pertenecen al usuario identificado.
Pasando proyectos a la vista Dashboard
Vamos a abrir el archivo de rutas web.php para pasar los proyectos de nuestra base de datos al componente Dashboard.vue.
Composable usePermissions
Una parte importante de este tutorial es este composable, ya que es el que nos va a decir a través de la interfaz con Vue 3 si podemos llevar a cabo acciones o no.
Su lógica es muy sencilla, la función can recibe el permiso a revisar y opcionalmente el ownerId, este último dato puede ser realmente útil para saber si un recurso, por ejemplo un proyecto, es de la autoría del usuario identificado.
El composable usePermissions lo podríamos utilizar directamente en cualquier parte de nuestra aplicación, pero si necesitamos hacer uso de él en las templates, deberíamos llamar al composable cada vez que lo necesitáramos, algo que puede ser repetir demasiado código y muy poco práctico.
Para solucionar este inconveniente, vamos a actualizar el archivo app.js para extender Vue añadiendo nuestra función can.
Utilizando nuestro Plugin y Composable
Finalmente podemos controlar permisos en script y layout con Vue 3 de una forma muy sencilla gracias a la lógica aplicada.
A partir de ahora podemos utilizar la función $can en las templates y el composable can en los scripts de nuestra aplicación Vue sin límite.