O que são interceptadores HTTP?

Question

Accepted Answer

**Interceptadores HTTP** ficam no meio de cada requisição/resposta `HttpClient`, permitindo que você as inspecione e transforme globalmente. Eles são o lugar perfeito para **cross-cutting concerns** que se aplicam a todas as requisições — tokens de autenticação, logging, tratamento de erros, indicadores de carregamento.

## Um interceptador funcional (Angular moderno)

```ts
import { HttpInterceptorFn } from "@angular/common/http";
import { inject } from "@angular/core";

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();

// requests are immutable — CLONE to modify
  const authReq = req.clone({
    setHeaders: { Authorization: `Bearer ${token}` }, // attach token to EVERY request
  });

return next(authReq); // pass the (modified) request along the chain
};
```

O interceptador recebe a requisição e uma função `next` (próximo handler). Crucialmente, as requisições são **imutáveis**, então você `.clone()` com mudanças em vez de mutar. Registrar isso uma vez significa que toda requisição sainte automaticamente carrega o cabeçalho auth — sem repetir em cada serviço.

## Por que isso importa

```ts
bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(withInterceptors([authInterceptor, errorInterceptor, loggingInterceptor])),
  ],
});
```

Vários interceptadores formam uma **cadeia**, cada um passando para o próximo — a ordem importa.

## Manipulando respostas e erros globalmente

```ts
import { catchError } from "rxjs/operators";
import { throwError } from "rxjs";

export const errorInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(
    catchError((err) => {
      if (err.status === 401) inject(Router).navigate(["/login"]); // global 401 handling
      inject(NotificationService).showError(err.message);
      return throwError(() => err);
    })
  );
```

Já que interceptadores envolvem a Observable de resposta também, você pode tratar erros (p.ex. redirecionar em 401, mostrar um toast) em **um lugar** para o aplicativo inteiro.

## Usos comuns de interceptadores

```text
✓ Attach auth tokens to requests
✓ Global error handling (401 → login, show notifications)
✓ Logging / analytics of all HTTP traffic
✓ Show/hide a global loading spinner
✓ Add common headers, retry logic, caching
```

## Por que isso importa

Interceptadores centralizam lógica que de outra forma seria duplicada em toda chamada HTTP — mais importante ainda, anexar tokens de autenticação e tratar erros globalmente.

Isso mantém os serviços limpos (eles apenas fazem requisições) e garante comportamento consistente em todo o aplicativo.

Os interceptadores auth-token e global-error são quase universais em aplicativos Angular em produção; conhecer a regra clone-to-modify e o modelo de cadeia é fundamental para escrevê-los corretamente.