Como Criar um HTTP Interceptor em Angular
Um interceptor em Angular é uma funcionalidade poderosa que permite interceptar e manipular solicitações e respostas HTTP. Eles são úteis para adicionar cabeçalhos de autenticação, fazer log de tráfego HTTP, tratar erros globais, entre outros.
Passo 1: Criar o Interceptor
Primeiro, você precisa gerar o interceptor usando o Angular CLI. No terminal, execute o seguinte comando:
ng generate interceptor http
Isso criará um novo arquivo interceptor chamado http.interceptor.ts dentro do diretório src/app.
Passo 2: Implementar o Interceptor
Abra o arquivo http.interceptor.ts e implemente a interface HttpInterceptor do Angular. Abaixo está um exemplo básico de um interceptor que adiciona um cabeçalho de autenticação a todas as solicitações HTTP:
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class HttpInterceptorService implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const token = 'seu-token-de-autenticacao';
// Clonar a requisição para adicionar o novo cabeçalho
const clonedRequest = req.clone({
headers: req.headers.set('Authorization', `Bearer ${token}`)
});
// Passar a requisição clonada ao próximo manipulador
return next.handle(clonedRequest);
}
}
Passo 3: Registrar o Interceptor
Depois de implementar o interceptor, você precisa registrá-lo no seu módulo principal (app.module.ts). Adicione a seguinte configuração no array providers:
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpInterceptorService } from './http.interceptor';
@NgModule({
declarations: [
// Seus componentes aqui
],
imports: [
// Seus módulos aqui
],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: HttpInterceptorService,
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
Passo 4: Testar o Interceptor
Agora, qualquer solicitação HTTP feita pelo seu aplicativo Angular incluirá o cabeçalho de autenticação que você adicionou no interceptor. Para testar, você pode criar um serviço que faça uma requisição HTTP e verificar se o cabeçalho está presente.
Exemplo de serviço (data.service.ts):
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private apiUrl = 'https://api.seuservico.com';
constructor(private http: HttpClient) { }
getData(): Observable<any> {
return this.http.get<any>(`${this.apiUrl}/dados`);
}
}
E no seu componente (app.component.ts):
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private dataService: DataService) {}
ngOnInit() {
this.dataService.getData().subscribe(data => {
console.log(data);
});
}
}
Conclusão
Criar um interceptor em Angular é uma maneira eficiente de adicionar funcionalidades transversais às suas requisições HTTP. Com os passos acima, você deve ser capaz de criar e registrar seu próprio interceptor para manipular requisições e respostas de acordo com as necessidades do seu projeto.