Si quiero una app que use rutas y controllers web para la navegación, pero que algunos componentes envíen mensajes a una API a través de AJAX. Primero¿Es posible esto? Y segundo ¿Necesito doble autenticación, una estándar de Laravel y la otra de Sanctum?
¡Sí, esto es totalmente posible y, de hecho, es una arquitectura muy común y efectiva! Estás describiendo lo que a menudo se conoce como una "aplicación híbrida" o "aplicación monolítica con mejoras de JavaScript".
1. ¿Es posible tener rutas y controladores web para navegación y AJAX a API?
Absolutamente sí. Esta es una estrategia muy extendida y madura en el desarrollo web.
Así es como funciona:
- Rutas y Controladores Web (HTML Rendering): Para la mayor parte de la navegación (cuando un usuario va de
/perfila/configuracion), Laravel se encarga de todo. Una ruta web (Route::get('/perfil', ...)) llama a un controlador que devuelve una vista Blade (return view('profile');). El navegador recibe y renderiza el HTML completo, y la página se recarga. - AJAX a la API (Interacciones Dinámicas): Dentro de esas vistas Blade (o cualquier parte de tu HTML), puedes tener pequeños componentes interactivos de JavaScript (puedes usar React, Vue, o simplemente JavaScript vainilla) que hagan llamadas AJAX (Asynchronous JavaScript and XML) a endpoints de tu API.
- Estas llamadas AJAX no recargan la página. Solo envían o reciben pequeños paquetes de datos (generalmente JSON) y actualizan partes específicas de la interfaz de usuario de forma dinámica.
- Ejemplo: Tienes un botón "Me gusta" en una publicación. Cuando el usuario hace clic, un pequeño script JavaScript en tu Blade envía una solicitud AJAX (un
POST) a un endpoint de tu API (/api/posts/{id}/like). La API procesa el "me gusta" y devuelve una confirmación, y tu JavaScript actualiza el contador de "Me gusta" en la página sin recargarla.
Este enfoque te permite tener lo mejor de ambos mundos: la simplicidad y el SEO de las aplicaciones tradicionales basadas en HTML para la navegación principal, y la interactividad y fluidez de una SPA para componentes específicos.
2. ¿Necesito doble autenticación (estándar de Laravel y Sanctum)?
No, no necesitas "doble autenticación" en el sentido de implementar dos sistemas de autenticación completamente separados y redundantes para el mismo usuario.
En este escenario, Laravel se encarga de la autenticación de sesión tradicional, y Sanctum se integra perfectamente con esa misma sesión.
Así es como funciona la autenticación:
-
Autenticación Estándar de Laravel (Basada en Sesiones y Cookies):
- Cuando un usuario inicia sesión en tu aplicación web (a través de un formulario de login gestionado por una ruta web de Laravel), Laravel crea una sesión de usuario y envía una cookie de sesión al navegador.
- Todas las solicitudes subsiguientes a tus rutas web (Blade views) se autentican automáticamente porque el navegador envía esa cookie de sesión, y Laravel la valida.
-
Autenticación de API con Sanctum (para tus llamadas AJAX):
- Aquí es donde Sanctum brilla. Para las llamadas AJAX que haces desde tu frontend JavaScript a tus rutas
api/*, Sanctum puede aprovechar la misma sesión de usuario que ya está activa. - Sanctum tiene un middleware llamado
EnsureFrontendRequestsAreStateful(que normalmente está en tu grupo de middlewareweboapipor defecto, o se aplica a las rutas de Sanctum). - Este middleware, junto con la configuración adecuada de CORS y CSRF, permite que tus llamadas AJAX de origen cruzado (si tu API está en un subdominio o puerto diferente, como
localhost:3000ylocalhost:8000) se autentiquen usando la cookie de sesión existente. - Protección CSRF: Es crucial que tu JavaScript obtenga el token CSRF (haciendo una llamada GET a
/sanctum/csrf-cookieal cargar la página) y lo envíe en un encabezadoX-XSRF-TOKENcon tus solicitudes POST/PUT/PATCH/DELETE a la API. Esto protege tus llamadas AJAX contra ataques CSRF, que son una preocupación cuando se usan cookies.
- Aquí es donde Sanctum brilla. Para las llamadas AJAX que haces desde tu frontend JavaScript a tus rutas
En resumen:
La autenticación principal se maneja a través del sistema de sesiones de Laravel. Sanctum simplemente extiende la funcionalidad de ese sistema para permitir que tus llamadas AJAX a api/* se autentiquen utilizando la misma sesión, sin necesidad de tokens de API adicionales para ese mismo usuario en el mismo navegador.
Esta arquitectura es muy eficiente porque reutilizas el sistema de autenticación de Laravel y solo necesitas configurar Sanctum para que extienda esa funcionalidad a tus llamadas AJAX, manteniendo la seguridad y la simplicidad.
Comentarios