23 Protección de la Interfaz (UI) en Laravel Ocultar Botones y Menú Dinamico Sistema Odontologíco
Duración: 18 minDescripción
🎓 Lección 23: Protección de la Interfaz (UI) en Laravel: Ocultar Botones y Menú Dinámico
Objetivo General: Configurar la seguridad en la capa de presentación (UI) renderizando condicionalmente el menú de navegación lateral y los botones de acción CRUD en las vistas Blade mediante la directiva @can, garantizando que cada usuario únicamente visualice las opciones permitidas según su rol.
🚀 Pasos Clave de la Lección
📊 Paso 1: Contador Dinámico de Permisos Asignados en el Listado de Roles
Se agrega una columna informativa en la tabla de roles (index.blade.php) que calcula en tiempo real la cantidad de permisos activos (role->permissions->count()) asociados a cada rol.
💬 Paso 2: Interacción con la Comunidad y Compatibilidad de Versiones (PHP/Laravel)
Se abordan dudas sobre compatibilidad entre versiones de Laravel (10, 11, 12, 13) y PHP (8.2, 8.3), aclarando la ejecución segura del comando php artisan migrate.
🛡️ Paso 3: Condicionar el Menú Lateral de Navegación con @can
En la plantilla del Layout principal (tabler.blade.php), se envuelven las opciones del menú de navegación con la directiva @can('Ver [módulo]') para ocultar automáticamente los enlaces no autorizados.
➕ Paso 4: Ocultar Botones de Creación y Modales de Registro
Se protege el botón de registro "Nuevo Tratamiento" (y modales asociados) en la vista del módulo envolviéndolo con @can('guarda tratamientos'), evitando la exposición de controles inactivos.
✏️ Paso 5: Protección Condicional de Botones de Acción en Tablas (Editar / Eliminar)
Se encierran los botones de edición (@can('editar tratamientos')) y eliminación (@can('eliminar tratamientos')) en la tabla de datos, garantizando que el usuario solo vea las acciones que puede ejecutar.
📁 Paso 6: Refactorización Global de Vistas Blade y Validación de UI
Se extiende el uso de la directiva @can a todas las vistas del proyecto (Usuarios, Pacientes, Doctores, Especialidades, Horarios), logrando una interfaz limpia y adaptada al nivel de acceso.
🛠️ Comandos y Rutas Principales
| Tipo | Comando / Ruta HTTP | Descripción / Propósito |
|---|---|---|
| Ruta GET | GET /admin/tratamientos | Vista de listado de tratamientos con acciones filtradas dinámicamente por la UI. |
| Directiva | @can('permiso') ... @endcan | Directiva de Blade para renderizar condicionalmente bloques de código HTML/UI. |
| Artisan | php artisan view:clear | Limpia la caché de plantillas Blade para reflejar cambios inmediatos en la interfaz. |
| Artisan | php artisan route:list --path=admin | Lista todas las rutas administrativas para verificar los nombres de permisos requeridos. |
🔒 Buenas Prácticas y Seguridad
- 🛡️ Seguridad en Capas (Defensa en Profundidad): Jamás confíes únicamente en ocultar botones con @can en la vista. La protección debe revalidarse estrictamente en las rutas HTTP con middlewares y en los controladores.
- 🧩 Consistencia de Nombres en Permisos: Mantén una convención uniforme para nombrar los permisos en el Seeder y las directivas Blade (ej. 'Ver doctores', 'editar tratamientos', 'guarda tratamientos').
- 👁️ Optimización de UX / UI: Ocultar elementos inalcanzables previene la frustración del usuario, evitando que interactúe con controles que derivarían en un error 403 Forbidden.
- 🧹 Mantenimiento de Plantillas Base: Centralizar la lógica de autorización en componentes parciales o en el layout principal para evitar duplicación de código en el menú de navegación.
