79 Personalizar Error 403 en Laravel 12: Diseñando una Pantalla de Acceso Denegado con Flux UI 🚫🛡️
Duración: 13 min¡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 79: Personalización del Error 403 e Identidad Visual
En esta sesión de Benji V2, abordamos dos puntos clave para profesionalizar el sistema: la mejora de la experiencia de usuario ante errores de permisos y la vinculación dinámica del logotipo y nombre de la empresa en la interfaz principal.
🛡️ Personalización de la Pantalla de Error 403
Por defecto, Laravel muestra una pantalla simple y en inglés cuando un usuario intenta acceder a una ruta sin autorización (Acceso Denegado).
- 📁 Estructura de Vistas: Creamos el directorio resources/views/errors/ y el archivo 403.blade.php. Laravel reconoce automáticamente este archivo para manejar las excepciones de tipo 403 [02:10].
- 🎨 Diseño con Flux UI: Implementamos una interfaz amigable que no rompe la estética del sistema. Incluye un mensaje claro en español, iconos de advertencia y botones de retorno al Dashboard o contacto con soporte [03:32].
- ✅ Beneficio: El usuario ya no siente que el sistema "se rompió", sino que recibe una explicación clara de por qué no puede ver esa página específica [04:14].
🏦 Identidad Visual Dinámica (Logo y Nombre)
Sustituimos los elementos estáticos del "Starter Kit" de Laravel por la configuración real guardada en el módulo de ajustes:
- 🔍 Consulta al Modelo Ajuste: En el componente applogo.blade.php, realizamos una consulta PHP para obtener el logotipo y el nombre de la empresa desde la base de datos [07:43].
- 🖼️ Renderizado de Logotipo: * Validamos la existencia del archivo en el almacenamiento (Storage::disk('public')->exists) antes de intentar mostrarlo [09:47].
- Utilizamos etiquetas <img> con clases de Tailwind para asegurar que el logo se vea bien y mantenga sus proporciones en la barra lateral [11:10].
- ✍️ Nombre de la Empresa: Reemplazamos el texto "Laravel Starter Kit" por la variable $ajuste->nombre, permitiendo que el nombre de la marca del cliente se refleje en todo el sistema de forma automática [12:15].
✅ Resultado de la Lección
El sistema Benji V2 ahora tiene una marca propia. Al cambiar el nombre o el logo en la configuración, toda la interfaz se actualiza instantáneamente. Además, los errores de permisos ahora se manejan con una elegancia que eleva la calidad percibida del software.
Contenido
Código fuente de la lección
<x-layouts.app :title="'403 - Acceso denegado'">
<div class="mx-auto flex min-h-[80vh] max-w-7xl items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
<div class="w-full max-w-md text-center">
<br><br><br>
<div class="mb-6 flex justify-center">
<div class="rounded-full bg-amber-50 p-4 dark:bg-amber-900/20">
<flux:icon name="shield-exclamation" class="h-22 w-22 text-amber-400 dark:text-amber-400" />
</div>
</div>
<h1 class="text-8xl font-black text-zinc-800 dark:text-white" style="font-size: 20pt">403</h1>
<h2 class="mt-2 text-xl font-semibold text-zinc-600 dark:text-zinc-400">Acceso denegado</h2>
<p class="mx-auto mt-4 max-w-sm text-base text-zinc-500 dark:text-zinc-500">
No tienes permisos suficientes para ver esta página.
</p>
<br>
<div class="mt-8 rounded-lg border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900/50">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
<span class="font-medium text-zinc-900 dark:text-zinc-400">Rol actual:</span>
Sin permisos necesarios
</p>
<p class="mt-2 text-xs text-zinc-500 dark:text-zinc-500">
Contacta al administrador si necesitas acceso.
</p>
</div>
<br>
<div class="mt-8 flex w-full justify-center">
<div class="flex flex-col items-center gap-3 sm:flex-row sm:justify-center">
<a href="{{ url()->previous() }}"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-zinc-300 bg-white px-5 py-2.5 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700">
<flux:icon name="arrow-left" class="h-4 w-4" />
Volver
</a>
<a href="{{ route('dashboard') }}"
class="inline-flex items-center justify-center gap-2 rounded-lg bg-blue-500 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">
<flux:icon name="home" class="h-4 w-4" />
Ir al inicio
</a>
</div>
</div>
<div class="mt-6">
<a href="#"
class="text-sm text-zinc-400 underline-offset-2 hover:text-zinc-600 hover:underline dark:text-zinc-500 dark:hover:text-zinc-300">
Contactar soporte →
</a>
</div>
</div>
</div>
</x-layouts.app>
Lecciones
Apoya este proyecto
Si te gusta nuestro contenido, ¡apóyanos con una donación!
Donar por Airtm Donar por Binance¡Gracias por tu apoyo! ❤️
