Vue Academy · Lección

Patrones de autenticación segura

Almacenamiento de tokens (memoria frente a localStorage frente a cookie httpOnly), renovación silenciosa y cierre de sesión al cerrar la pestaña

Patrones de autenticación segura es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Los tokens y dónde se almacenan

Las SPA se autentican con tokens, pero el lugar donde los almacene determina su exposición a XSS y CSRF. El patrón moderno separa un token de acceso de corta duración de un token de actualización de larga duración, y almacena cada uno de forma diferente.

El problema de localStorage

Almacenar tokens en localStorage resulta práctico, pero es peligroso: cualquier script inyectado mediante XSS puede leerlo y extraer el token. Evite guardar ahí las credenciales.

// AVOID
localStorage.setItem("token", accessToken);

Token de acceso en memoria

Mantenga el token de acceso en una variable de JavaScript o en una referencia reactiva. Desaparece al recargar la página, por lo que un XSS exitoso tiene una ventana de oportunidad mucho menor y no queda nada persistido en el disco.

import { ref } from "vue";

export const accessToken = ref(null);

Token de actualización en una cookie httpOnly

El token de actualización se almacena en una cookie HttpOnly, Secure y SameSite. JavaScript no puede leerlo, por lo que XSS no puede robarlo, y el navegador solo lo envía a su endpoint de autenticación.

Set-Cookie: refresh=...; HttpOnly; Secure; SameSite=Strict; Path=/auth

Adjuntar el token de acceso

Un interceptor de solicitudes de Axios añade el token de acceso en memoria a la cabecera Authorization en cada llamada.

api.interceptors.request.use((config) => {
  if (accessToken.value) {
    config.headers.Authorization = "Bearer " + accessToken.value;
  }
  return config;
});

Detectar la caducidad: el 401

Cuando caduca el token de acceso, el servidor responde con 401 Unauthorized. Un interceptor de respuestas captura esta respuesta para activar la renovación.

api.interceptors.response.use(
  (res) => res,
  async (error) => {
    if (error.response?.status === 401) {
      // attempt refresh
    }
    return Promise.reject(error);
  }
);

Renovar el token

Cuando se reciba un 401, llame al endpoint de renovación. El navegador envía automáticamente la cookie de actualización httpOnly (withCredentials) y el servidor devuelve un token de acceso nuevo.

const { data } = await axios.post("/auth/refresh", null, {
  withCredentials: true
});
accessToken.value = data.accessToken;

Reintentar la solicitud original

Después de actualizar el token, vuelva a enviar la solicitud original que falló con el nuevo token para que el usuario no lo note.

async (error) => {
  const original = error.config;
  if (error.response?.status === 401 && !original._retry) {
    original._retry = true;
    const { data } = await axios.post("/auth/refresh", null, { withCredentials: true });
    accessToken.value = data.accessToken;
    original.headers.Authorization = "Bearer " + data.accessToken;
    return api(original);
  }
  return Promise.reject(error);
}

Evitar avalanchas de renovaciones

Si muchas solicitudes devuelven 401 a la vez, póngalas en cola detrás de una única renovación en curso para no llamar repetidamente al endpoint de renovación.

let refreshing = null;
function refresh() {
  if (!refreshing) {
    refreshing = axios.post("/auth/refresh", null, { withCredentials: true })
      .finally(() => { refreshing = null; });
  }
  return refreshing;
}

Cerrar sesión

Al cerrar sesión, elimine el token en memoria y llame a un endpoint que elimine la cookie de actualización en el servidor.

async function logout() {
  accessToken.value = null;
  await axios.post("/auth/logout", null, { withCredentials: true });
}

Combinar con protección contra CSRF

Como la cookie de actualización se envía automáticamente, proteja ese endpoint con SameSite y tokens CSRF, igual que las demás rutas autenticadas mediante cookies.

Comprobación rápida

¿Dónde debe almacenarse el token de acceso y dónde el token de actualización?

Resumen

Almacene el token de acceso en una referencia en memoria (nunca en localStorage) y el token de actualización en una cookie HttpOnly. Un interceptor de solicitudes adjunta el token bearer; un interceptor de respuestas detecta 401, llama al endpoint de actualización, actualiza el token y vuelve a intentar la solicitud original, deduplicando las actualizaciones simultáneas y combinándolas con defensas contra CSRF.

Preguntas frecuentes

¿La lección «Patrones de autenticación segura» es gratis?

Sí — el texto completo de «Patrones de autenticación segura» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Patrones de autenticación segura»?

Almacenamiento de tokens (memoria frente a localStorage frente a cookie httpOnly), renovación silenciosa y cierre de sesión al cerrar la pestaña Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Patrones de autenticación segura»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Vue Academy