Llamadas autenticadas a la API con interceptores de Axios
Interceptor de solicitudes para la cabecera Authorization e interceptor de respuestas para 401 → renovación → reintento
Llamadas autenticadas a la API con interceptores de Axios es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 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.
El patrón de interceptores
En lugar de adjuntar los encabezados de autenticación y gestionar los 401 en cada llamada, los interceptores de Axios centralizan esta lógica. Un interceptor de solicitudes añade el token y un interceptor de respuestas gestiona la expiración y la actualización de forma transparente.
Crear la instancia de Axios
Cree una instancia específica con la URL base de la API y withCredentials para que la cookie de actualización httpOnly se envíe al endpoint de actualización.
import axios from 'axios'
const api = axios.create({
baseURL: '/api',
withCredentials: true // send cookies
})
export default apiAlmacenar el token de acceso en memoria
Conserve el token de acceso en una variable de módulo (o en un almacén de Pinia) en lugar de localStorage. Un pequeño par de funciones de acceso permite que los interceptores lo lean y lo actualicen.
let accessToken = null
export function setAccessToken(t) { accessToken = t }
export function getAccessToken() { return accessToken }Interceptor de solicitudes: añadir el encabezado
El interceptor de solicitudes se ejecuta antes de cada solicitud y adjunta Authorization: Bearer <token> cuando existe un token.
api.interceptors.request.use((config) => {
const token = getAccessToken()
if (token) {
config.headers.Authorization = 'Bearer ' + token
}
return config
})Interceptor de respuestas: capturar el 401
El interceptor de respuestas deja pasar las respuestas correctas sin modificarlas, pero cuando recibe un 401 activa el flujo de actualización.
api.interceptors.response.use(
(response) => response,
async (error) => {
const original = error.config
if (error.response?.status === 401 && !original._retried) {
// ... refresh and retry (next scenes)
}
return Promise.reject(error)
}
)Evitar bucles infinitos de reintentos
Marque la solicitud fallida con un indicador como _retried para que solo se reintente una vez. Si la propia actualización devuelve un 401, la solicitud se rechaza en lugar de entrar en un bucle infinito.
if (error.response?.status === 401 && !original._retried) {
original._retried = true
// attempt refresh exactly once for this request
}Llamar al endpoint de actualización
Cuando reciba un 401, haga POST a /auth/refresh. El navegador envía automáticamente la cookie de actualización httpOnly y el servidor responde con un nuevo token de acceso.
const { data } = await api.post('/auth/refresh')
setAccessToken(data.accessToken)Reintentar la solicitud original
Después de actualizar el token, modifique el encabezado de la configuración original y vuelva a ejecutar la solicitud. El usuario no percibe la interrupción.
original.headers.Authorization = 'Bearer ' + data.accessToken
return api(original) // retry the original requestGestionar varios 401 simultáneos
Si muchas solicitudes fallan a la vez, no querrá realizar N llamadas de actualización en paralelo. Comparta una única promesa de actualización en curso; las solicitudes en cola esperan a que termine y después se reintentan con el nuevo token.
let refreshing = null
function refreshOnce() {
if (!refreshing) {
refreshing = api.post('/auth/refresh')
.finally(() => { refreshing = null })
}
return refreshing
}Abandonar: forzar el cierre de sesión
Si la actualización falla (el token de actualización ha expirado o no es válido), borre el token almacenado en memoria y redirija al inicio de sesión. Este es el único lugar que gestiona la expiración de la sesión para toda la aplicación.
try {
await refreshOnce()
} catch {
setAccessToken(null)
router.push('/login')
return Promise.reject(error)
}Usar la instancia en los componentes
Los componentes solo importan la instancia api configurada y realizan las llamadas. Los encabezados de autenticación, la actualización y los reintentos son completamente transparentes para el código de los componentes.
<script setup>
import api from '@/lib/api'
import { ref, onMounted } from 'vue'
const profile = ref(null)
onMounted(async () => {
const { data } = await api.get('/me')
profile.value = data
})
</script>Comprobación rápida
Compruebe su comprensión de los interceptores de Axios.
Resumen
Ha aprendido a realizar llamadas autenticadas con interceptores:
- El interceptor de solicitudes añade
Authorization: Bearera partir del token en memoria - El interceptor de respuestas captura el
401y actualiza el token - Un indicador
_retriedreintenta la solicitud original exactamente una vez POST /auth/refreshutiliza la cookie httpOnly para obtener un nuevo token- Comparta una única promesa de actualización para los 401 simultáneos y fuerce el cierre de sesión si falla
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 42
- Lecciones
- 156
Preguntas frecuentes
¿La lección «Llamadas autenticadas a la API con interceptores de Axios» es gratis?
Sí — el texto completo de «Llamadas autenticadas a la API con interceptores de Axios» 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 «Llamadas autenticadas a la API con interceptores de Axios»?
Interceptor de solicitudes para la cabecera Authorization e interceptor de respuestas para 401 → renovación → reintento 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 3 de 4.
¿Cuánto tiempo toma la lección «Llamadas autenticadas a la API con interceptores de Axios»?
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
- Backend Fastify para SPA de Vue
- Autenticación JWT: inicio de sesión y renovación
- Llamadas autenticadas a la API con interceptores de Axios
- Despliegue de Vue full-stack en producción