# Documentación de CRM Dreinet - Sistema de Autenticación y Login ## Introducción Esta documentación describe el sistema de autenticación y login del CRM Dreinet, una aplicación web desarrollada con Nuxt 3, Pinia para gestión de estado, y Tailwind CSS para estilos. El sistema permite a los usuarios autenticarse contra un backend API y acceder al dashboard principal del CRM. ## Arquitectura del Sistema de Autenticación El sistema de autenticación está compuesto por los siguientes componentes principales: ### 1. Página de Login **Ubicación:** `pages/login.vue` Esta página presenta un formulario de inicio de sesión con los siguientes campos: - Email - Contraseña - Opción "Recordarme" **Características principales:** - Validación en tiempo real de campos - Mensajes de error específicos - Animación visual durante el proceso de login - Redirección automática al dashboard tras login exitoso ### 2. Store de Autenticación **Ubicación:** `stores/auth.js` Gestiona el estado de autenticación del usuario utilizando Pinia, incluyendo: - Estado del usuario actual - Token de autenticación - Estado de login **Acciones principales:** - `login(credentials)`: Inicia sesión con el backend - `logout()`: Cierra la sesión del usuario - `checkAuth()`: Verifica si el usuario está autenticado - `setUser(user)`: Establece los datos del usuario - `setToken(token)`: Establece el token de autenticación ### 3. Servicio de API **Ubicación:** `config/api.js` Gestiona las comunicaciones con el backend mediante: - Configuración de rutas API - Manejo de cabeceras y autenticación - Procesamiento de respuestas **Rutas de autenticación:** ```javascript AUTH: { LOGIN: '/login/', LOGOUT: '/logout/', VERIFY_TOKEN: '/verify-token/', REFRESH_TOKEN: '/refresh-token/', } ``` ### 4. Configuración de Nuxt **Ubicación:** `nuxt.config.ts` Define la configuración global de la aplicación: - URL base del backend (`apiBase`) - Configuración de cabeceras - Módulos necesarios (Pinia, TailwindCSS) ## Flujo de Autenticación ### 1. Inicio de Sesión 1. El usuario ingresa credenciales en el formulario de login 2. Se realiza validación de los campos: - Email: formato válido y obligatorio - Contraseña: mínimo 6 caracteres y obligatoria 3. Al enviar el formulario, se ejecuta `handleLogin()` 4. Se llama a `authStore.login()` con las credenciales 5. El store envía una petición POST al endpoint `/login/` 6. El backend valida las credenciales y responde: ```json { "success": true, "data": { "user": { "id": 2, "email": "ejemplo@dominio.com", "first_name": "Nombre", "last_name": "Apellido", "role": "support" }, "token": "jwt_token_from_backend" } } ``` 7. El store guarda: - Datos del usuario con `setUser()` - Token con `setToken()` - Estado de autenticación `isLoggedIn = true` - Información en localStorage para persistencia 8. Se redirecciona al usuario a la página principal (`/`) ### 2. Verificación de Autenticación 1. Cada vez que se carga la aplicación, se ejecuta `checkAuth()` 2. La función verifica la existencia de token en localStorage 3. Si existe un token: - Restaura los datos del usuario desde localStorage - Verifica la validez del token con el backend mediante `/verify-token/` - Si el token es válido, establece el estado de autenticación - Si es inválido, elimina los datos y redirecciona a login ### 3. Cierre de Sesión 1. Al llamar a `logout()`: - Se notifica al backend mediante POST a `/logout/` - Se limpian los datos del usuario y token del store - Se eliminan los datos de localStorage - Se redirecciona al usuario a la página de login ## Estructura de Datos ### Usuario ```typescript interface User { id: number; email: string; first_name: string; last_name: string; role: string; // Otros campos posibles según el backend } ``` ### Respuesta de Autenticación ```typescript interface AuthResponse { success: boolean; data?: { user: User; token: string; }; error?: string; } ``` ## Seguridad El sistema implementa las siguientes medidas de seguridad: 1. **Tokens JWT**: Almacenados en localStorage y enviados en cabeceras Authorization 2. **Validación en cliente**: Previene envíos de datos inválidos 3. **Verificación de tokens**: Comprobación de validez en cada carga de página 4. **Manejo de errores**: Retroalimentación clara sobre problemas de autenticación 5. **Logout automático**: En caso de tokens inválidos o expirados ## Configuración del Backend El sistema está configurado para comunicarse con un backend en la dirección: ``` http://192.168.90.67:8020/api ``` Las rutas principales son: - Login: `/login/` - Logout: `/logout/` - Verificar token: `/verify-token/` - Renovar token: `/refresh-token/` ## Consideraciones para Producción 1. **HTTPS**: Asegurarse de que todas las comunicaciones utilizan HTTPS 2. **Tiempo de expiración de tokens**: Configurar tiempos adecuados de validez 3. **Renovación de tokens**: Implementar renovación automática antes de expiración 4. **Manejo de sesiones concurrentes**: Considerar políticas de múltiples sesiones ## Solución de Problemas Comunes ### Error al Parsear JSON del Usuario ``` SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data ``` **Solución**: Este error ocurre cuando los datos del usuario almacenados en localStorage no son JSON válido. Para resolverlo: 1. Limpiar el localStorage: ```javascript localStorage.removeItem('auth_user'); localStorage.removeItem('auth_token'); ``` 2. Realizar un nuevo inicio de sesión para regenerar los datos correctamente. ### Problemas de CORS Si hay errores de CORS al comunicarse con el backend: 1. Verificar que el backend tenga configurados los encabezados CORS correctamente 2. Asegurarse de que la URL base en `nuxt.config.ts` es correcta 3. Verificar que las rutas en `API_ROUTES` no duplican partes de la URL --- Esta documentación describe el estado actual del sistema de autenticación en el CRM Dreinet. El sistema está configurado para trabajar directamente con el backend real en la dirección especificada.