Configuração de Headers HTTP Globais em Angular

Neste artigo você vai aprender a configurar Headers HTTP Globais em Angular, ou seja, que persistam em todas as requisições

Fala programador(a), beleza? Bora aprender mais sobre Angular!

No desenvolvimento de aplicações web modernas, frequentemente precisamos interagir com APIs e serviços remotos.

Nesse contexto, o Angular oferece uma maneira robusta e flexível de trabalhar com requisições HTTP.

Um requisito comum é a necessidade de enviar headers personalizados com cada requisição.

Neste artigo, vamos explorar como configurar headers HTTP para todas as requisições em uma aplicação Angular.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 114 aulas
• 4 projetos
• 9h 18min

Conhecer formação

Por que Configurar Headers Globais?

Headers HTTP são utilizados por várias razões, como autenticação, cache, controle de conteúdo, entre outros.

Configurar esses headers globalmente garante que todas as requisições feitas pela sua aplicação Angular tenham os headers necessários, evitando a repetição de código e potenciais erros.

Configurando Headers com Interceptors

No Angular, podemos configurar headers globais usando interceptors. Interceptors são uma forma poderosa de interceptar requisições HTTP e respostas para realizar operações antes que a requisição seja enviada ou antes que a resposta seja observada pelo aplicativo.

Criando um HTTP Interceptor

Para adicionar um header a todas as requisições, você precisa criar um serviço que implemente a interface HttpInterceptor.

Exemplo de Código:

import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class HeaderInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Clona a requisição para adicionar o header desejado
    const modifiedReq = req.clone({ 
      headers: req.headers.set('Header-Name', 'Header-Value')
    });
    
    // Passa a requisição modificada adiante
    return next.handle(modifiedReq);
  }
}

Neste exemplo, Header-Name é o nome do header que você quer adicionar, e Header-Value é o valor desse header.

Registrando o Interceptor

Para que o Angular use o interceptor, você deve registrá-lo no módulo da aplicação.

Exemplo de Código:

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HeaderInterceptor } from './header-interceptor';

@NgModule({
  declarations: [
    // Seus componentes aqui
  ],
  imports: [
    // Seus módulos aqui
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HeaderInterceptor,
      multi: true,
    },
  ],
})
export class AppModule { }

A propriedade multi: true indica que você está adicionando um interceptor ao array de interceptors existentes, e não substituindo-os.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Configurar headers HTTP globais é uma prática comum e necessária em muitas aplicações Angular.

Usar um interceptor é uma maneira eficiente de centralizar essa configuração, garantindo que todos os headers necessários sejam enviados em cada requisição HTTP.

Esta abordagem não só melhora a manutenibilidade do código, mas também ajuda a prevenir erros e inconsistências.

Está buscando evoluir como Programador? Confira o nossos cursos de programação.