Lección: 59 🔑 Seguridad de UI: Ocultando y Mostrando Componentes con la Directiva @can de Laravel Blade

59 🔑 Seguridad de UI: Ocultando y Mostrando Componentes con la Directiva @can de Laravel Blade

Duración: 15 min

Módulo: ⚙️ Gestión de Órdenes, Perfiles y Características Avanzadas 43-61 Lección 17 de 19

¡Contenido Exclusivo!

Adquiere este curso para tener acceso inmediato a esta y a **todas las lecciones Premium**.

Inscribirse Ahora por $10.00 Acceso instantáneo de por vida y código fuente incluido.

Descripción

Lección 59: 🔑 Seguridad de UI | Ocultando y Mostrando Componentes con la Directiva @can de Laravel Blade

Esta lección se centra en completar la implementación de Roles y Permisos, extendiendo la lógica de seguridad a la interfaz de usuario (UI). El objetivo es que los usuarios solo vean en el menú y el dashboard la información y las opciones para las que tienen permisos explícitos.

1. 🧱 Restricción del Menú de Navegación

Se utiliza la directiva @can de Laravel Blade, proporcionada por la librería Spatie, para envolver cada elemento del menú y restringir su visibilidad:

Directiva @can 🛡️: Esta directiva envuelve un bloque de código y solo lo renderiza si el usuario actualmente autenticado tiene el permiso especificado [03:02].
Aplicación a Ítems del Menú 🧭: Cada elemento del menú (Inicio, Roles, Usuarios, Categorías, Productos, Pedidos, Ajustes) se envuelve con @can('nombre del permiso') y el nombre exacto del permiso asociado a su listado [04:08].
Resultado ✨: Al ingresar con un usuario de "Rol de Prueba" (que solo tiene acceso a usuarios), el menú desaparece y solo se visualizan los enlaces de "Inicio" y "Usuarios" [07:30]. Se demuestra en tiempo real que al añadir el permiso de "Categorías" al rol, el ítem de menú aparece instantáneamente [07:58].

2. 📊 Restricción de Cards en el Dashboard

Se aplica la misma lógica para ocultar los cards informativos del dashboard a usuarios no autorizados, garantizando que el diseño se mantenga limpio y relevante:

Aplicación a Componentes de Vista 🖼️: La directiva @can se aplica a la columna completa (<div class="col-md-3">) que contiene cada card del dashboard [09:04].
Listado de Permisos para Cards 🏷️: Se utilizan permisos de visualización (ej., listado de roles, listado de usuarios, listado de categorías, etc.) para controlar la aparición de cada estadística [09:26].
Resultado Dinámico 💨: Se verifica que, al quitar el permiso de "Listado de roles" al "Rol de Prueba", el card de roles desaparece del dashboard [09:46]. El diseño se autoajusta para llenar el espacio vacío, manteniendo la coherencia visual [10:05].

3. 🌟 Conclusión de Módulo

Con la seguridad implementada tanto a nivel de rutas (controlador) como a nivel de interfaz (vistas), el módulo de Roles y Permisos está completamente operativo, ofreciendo un control de acceso robusto y una experiencia de usuario optimizada [14:17].
El próximo capítulo se enfocará en terminar de aplicar esta lógica a otros elementos pendientes del menú o del dashboard para asegurar la integridad total del sistema [14:25].

Hilari Web