22 Asignar y Revocar Permisos en Tiempo Real con Ajax y Spatie laravel Sistema Odontologíco Clinica
Duración: 14 minDescripción
🎓 Lección 22: Asignación e Interacción de Permisos en Tiempo Real con AJAX y Spatie en Laravel
Objetivo General: Implementar la matriz de permisos por rol, construyendo la vista dinámica de asignación agrupada y el controlador asíncrono vía AJAX/Fetch con Spatie Permissions para otorgar y revocar privilegios en tiempo real sin recargar la página.
🚀 Pasos Clave de la Lección
🔗 Paso 1: Configuración de la Ruta y Ajuste del Menú de Permisos
Se corrige el botón de acción en la vista principal de roles (index.blade.php), transformándolo en un enlace dinámico orientado a la ruta admin/roles/{id}/permisos.
🛠️ Paso 2: Consulta del Rol y Colección de Permisos en el Controlador
En el método permisos() de RoleController, se recupera el ID del rol mediante parámetro de ruta y se obtienen todas las directivas de permisos registradas con Spatie para enviarlas a la vista.
🎨 Paso 3: Creación de la Vista Agrupada y Contenedor de Switches
Se maqueta la plantilla permisos.blade.php, agrupando conceptualmente los permisos de la aplicación mediante colecciones e integrando componentes tipo switch/toggle para cada acción.
⚙️ Paso 4: Peticiones Asíncronas con JavaScript / AJAX (Fetch API)
Se escribe el script encargado de capturar los eventos de activación/desactivación de los switches y enviar las peticiones HTTP mediante AJAX al servidor con la cabecera del token CSRF.
🔄 Paso 5: Lógica de Asignación y Revocación Dinámica (togglePermissions)
En el controlador se verifica el estado actual del permiso en el rol utilizando los métodos de Spatie: si el rol ya lo posee, se revoca (revokePermissionTo), y si no lo posee, se le otorga (givePermissionTo).
🧪 Paso 6: Pruebas del Sistema, Restricción de Rutas y Verificación en Base de Datos
Se prueba la asignación de permisos con un usuario de rol paciente y se verifica cómo impacta en tiempo real tanto en la experiencia del usuario al acceder a rutas como en la tabla intermedia role_has_permissions.
🛠️ Comandos y Rutas Principales
| Tipo | Comando / Ruta HTTP | Descripción / Propósito |
|---|---|---|
| Ruta GET | GET /admin/roles/{id}/permisos | Carga la vista con la matriz interactiva de permisos asignados al rol. |
| Ruta POST | POST /admin/roles/toggle-permissions | Petición AJAX encargada de otorgar o revocar un permiso dinámicamente. |
| Artisan | php artisan permission:cache-reset | Limpia la caché interna del paquete Spatie para aplicar cambios globales. |
| Artisan | php artisan route:list --name=roles | Muestra el listado de rutas asociadas al módulo de roles y seguridad. |
🔒 Buenas Prácticas y Seguridad
- 🔒 Validación de Token CSRF en AJAX: Es imprescindible incluir el encabezado X-CSRF-TOKEN en las peticiones Fetch/AJAX para prevenir ataques de falsificación de peticiones en sitios cruzados.
- ⚡ Control de Concurrencia y UI: Deshabilitar los switches o mostrar un indicador de carga (loading) durante la petición asíncrona para evitar que el usuario haga clics repetidos antes de recibir la respuesta del servidor.
- 🛡️ Validación Rigurosa en Backend: Nunca confiar exclusivamente en el estado del checkbox o interfaz visual; se debe revalidar en el controlador la existencia del permiso y los derechos de edición del usuario logueado.
- 📊 Limpieza de Caché de Spatie: Al modificar asignaciones de permisos en producción, utilizar los mecanismos de invalidación de caché de Spatie para garantizar el refresco inmediato en la sesión del cliente.
