Quiz: Estado, autenticación y optimización

Tipo de lección: Quiz

Concepto clave

En SvelteKit, el estado global se refiere a datos que necesitan ser accesibles desde múltiples componentes sin tener que pasarlos explícitamente a través de props. Imagina que estás construyendo una aplicación de comercio electrónico: el carrito de compras debe estar disponible en la página de productos, en el encabezado y en la página de pago. Pasar el carrito como prop a través de toda la jerarquía de componentes sería engorroso y propenso a errores.

La autenticación en SvelteKit se maneja típicamente mediante cookies o tokens, con Server Actions que verifican credenciales en el servidor antes de permitir el acceso a rutas protegidas. Piensa en esto como un guardia de seguridad en un edificio: verifica tu identidad antes de dejarte entrar a áreas restringidas.

La optimización implica técnicas como code splitting, lazy loading y caching para asegurar que tu aplicación cargue rápido y responda de manera eficiente, similar a cómo un restaurante organiza su cocina para servir platos rápidamente sin sacrificar calidad.

Cómo funciona en la práctica

Para implementar estado global en SvelteKit, puedes usar stores de Svelte. Primero, crea un store en un archivo separado (por ejemplo, stores.js). Luego, importa este store en cualquier componente que necesite acceder o modificar el estado. Por ejemplo, un store para el tema de la aplicación permitiría que todos los componentes sepan si el modo oscuro está activado.

La autenticación se configura en hooks de SvelteKit. En src/hooks.server.js, puedes verificar la sesión del usuario en cada solicitud y decidir si permitir el acceso a ciertas rutas. Las Server Actions se usan para manejar el inicio de sesión y cierre de sesión, procesando formularios en el servidor de manera segura.

La optimización se logra mediante la configuración de SvelteKit, como usar export const prerender = true para páginas estáticas o implementar lazy loading para componentes pesados que no se necesitan inmediatamente.

Codigo en accion

Ejemplo de un store para estado global de autenticación:

// src/lib/stores/authStore.js
import { writable } from 'svelte/store';

export const user = writable(null);

export async function login(email, password) {
  const response = await fetch('/api/auth/login', {
    method: 'POST',
    body: JSON.stringify({ email, password })
  });
  const data = await response.json();
  if (data.user) {
    user.set(data.user);
  }
  return data;
}

export function logout() {
  user.set(null);
  fetch('/api/auth/logout', { method: 'POST' });
}

Ejemplo de una Server Action para autenticación:

// src/routes/api/auth/login/+server.js
export async function POST({ request, cookies }) {
  const { email, password } = await request.json();
  // Verificar credenciales en una base de datos
  const user = await db.getUserByEmail(email);
  if (user && await verifyPassword(password, user.passwordHash)) {
    const sessionId = generateSessionId();
    cookies.set('sessionId', sessionId, { path: '/', httpOnly: true });
    await db.saveSession(sessionId, user.id);
    return new Response(JSON.stringify({ user: { id: user.id, email: user.email } }), {
      status: 200
    });
  }
  return new Response(JSON.stringify({ error: 'Credenciales inválidas' }), {
    status: 401
  });
}

Errores comunes

• Almacenar datos sensibles en el store del cliente: Los stores en el cliente son accesibles desde las herramientas de desarrollo. Nunca guardes tokens o contraseñas aquí; usa cookies seguras o almacenamiento en el servidor.
• No proteger rutas en el servidor: Incluso si ocultas elementos en el cliente, los usuarios pueden acceder a rutas directamente. Siempre verifica la autenticación en hooks o load functions del servidor.
• Sobrecargar el estado global: No todo debe ir en un store global. Usa props para datos que solo se necesitan en componentes hijos directos, para mantener el código simple y eficiente.
• Ignorar la optimización de imágenes y assets: Imágenes grandes pueden ralentizar tu aplicación. Usa formatos modernos como WebP y configura lazy loading para mejorar el rendimiento.
• No manejar estados de carga y error: Cuando usas Server Actions, muestra indicadores de carga y mensajes de error amigables para mejorar la experiencia del usuario.

Checklist de dominio

1. Puedo crear y usar un store de Svelte para estado global en una aplicación real.
2. Implemento autenticación con Server Actions y protejo rutas en el servidor.
3. Uso hooks de SvelteKit para manejar sesiones y autorización.
4. Aplico técnicas de optimización como code splitting y lazy loading en mis proyectos.
5. Manejo adecuadamente errores y estados de carga en operaciones asíncronas.
6. Evito errores comunes como almacenar datos sensibles en el cliente.
7. Puedo explicar la diferencia entre estado local, estado global y autenticación en SvelteKit.

Implementa un sistema de carrito de compras con autenticación y optimización

En este ejercicio, construirás un carrito de compras para una aplicación de comercio electrónico usando SvelteKit. Sigue estos pasos:

1. Crea un store global en src/lib/stores/cartStore.js que maneje los items del carrito (id, nombre, precio, cantidad). Incluye funciones para agregar, eliminar y actualizar items.
2. Implementa una ruta protegida /checkout que solo usuarios autenticados puedan acceder. Usa un hook en src/hooks.server.js para verificar una cookie de sesión.
3. Crea una Server Action en src/routes/api/cart/add/+server.js que agregue items al carrito y actualice el store. Asegúrate de validar los datos en el servidor.
4. Optimiza la carga de la página de productos usando export const prerender = true para productos estáticos y lazy loading para imágenes grandes.
5. Agrega un indicador de carga cuando se agreguen items al carrito y maneja errores si la Server Action falla.

Pistas

• Usa writable de Svelte para el store y get para acceder a su valor en componentes.
• En el hook, verifica la cookie y redirige a /login si no hay sesión válida.
• Para lazy loading de imágenes, usa el atributo loading="lazy" en etiquetas img.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.