Angular Academy · Lección

Añadir encabezados de autenticación

Adjuntar tokens a las solicitudes salientes

Añadir encabezados de autenticación es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 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 Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Por qué interceptar para la autenticación

La mayoría de las API requieren un encabezado Authorization en cada solicitud. En lugar de añadirlo manualmente a cada llamada, un interceptor lo inyecta automáticamente en todas las solicitudes salientes.

Clonar para añadir un encabezado

Como las solicitudes son inmutables, use setHeaders al clonar para adjuntar el token.

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  const authReq = req.clone({
    setHeaders: { Authorization: 'Bearer ' + token }
  });
  return next(authReq);
};

Leer el token desde un servicio

Inyecte un servicio de autenticación o de tokens para obtener el token actual. Usar una señal o un BehaviorSubject en su interior mantiene actualizado el valor.

export class AuthService {
  private token = signal<string | null>(null);
  getToken() { return this.token(); }
  setToken(t: string) { this.token.set(t); }
}

Omitir cuando no haya token

Si el usuario no ha iniciado sesión, pase la solicitud original sin cambios.

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  if (!token) return next(req);
  return next(req.clone({
    setHeaders: { Authorization: 'Bearer ' + token }
  }));
};

Aplicarlo solo a su API

No exponga su token a URL de terceros. Compruebe que la URL de la solicitud pertenece a su backend.

const isApi = req.url.startsWith(environment.apiUrl);
if (!isApi || !token) return next(req);
return next(req.clone({
  setHeaders: { Authorization: 'Bearer ' + token }
}));

setHeaders frente a headers.set

Usar setHeaders en clone es la forma más concisa. También puede usar req.headers.set(...) y pasarlo mediante { headers }. setHeaders combina los encabezados; no los reemplaza todos.

const headers = req.headers.set('Authorization', 'Bearer ' + token);
return next(req.clone({ headers }));

Añadir varios encabezados

Adjunte varios encabezados a la vez en una sola clonación.

return next(req.clone({
  setHeaders: {
    Authorization: 'Bearer ' + token,
    'X-Client': 'web',
    'Accept-Language': lang
  }
}));

withCredentials para cookies

Si la autenticación utiliza cookies HttpOnly en lugar de tokens, establezca withCredentials para que el navegador las envíe entre distintos orígenes.

return next(req.clone({ withCredentials: true }));

Actualizar un token caducado

Para actualizar un token, el interceptor puede capturar un 401, solicitar un token nuevo y volver a intentar la solicitud original; es un patrón más avanzado que se aborda en la gestión de errores.

Mantener la pureza del interceptor

El interceptor debe leer el token y clonar la solicitud; evite iniciar navegaciones o ejecutar lógica compleja aquí. Mantenga las responsabilidades centradas para que la canalización de solicitudes sea predecible.

Registrar el interceptor de autenticación

Colóquelo al principio de la cadena para que el encabezado esté presente antes de que se ejecuten el registro u otros interceptores.

provideHttpClient(
  withInterceptors([authInterceptor, loggingInterceptor])
)

Comprobación rápida

Compruebe su comprensión de cómo añadir encabezados de autenticación.

Resumen: añadir encabezados de autenticación

Un interceptor de autenticación adjunta el token a las solicitudes salientes.

Clone con setHeaders: { Authorization: ... }.
Omita la solicitud si no hay token y limítelo a la URL de su API.
Use withCredentials para la autenticación mediante cookies.

Siguiente: gestionar errores globalmente.

Preguntas frecuentes

¿La lección «Añadir encabezados de autenticación» es gratis?

Sí — el texto completo de «Añadir encabezados de autenticación» 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 Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Añadir encabezados de autenticación»?

Adjuntar tokens a las solicitudes salientes Practicas Angular 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 Angular Academy?

No se requiere experiencia previa. Angular 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 2 de 4.

¿Cuánto tiempo toma la lección «Añadir encabezados de autenticación»?

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 Angular Academy?

Sí. Cada lección de Angular 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 Angular Academy