Como usar Interceptors no Angular

Interceptors no Angular são recursos muito poderosos e podem ser usados para interceptar e manipular as requisições HTTP que são feitas pela aplicação.

Nesse artigo você vai aprender como utilizar esse recurso fantástico!

Se preferir, assista o vídeo diretamente no YouTube:

Como criar um interceptor

No exemplo abaixo vamos criar um interceptor que intercepta todas as requisições HTTP e adiciona um Header personalizado chamado Authorization.

Você pode utilizar o comando ng g interceptor <name> para criar uma estrutura básica do interceptor.

export const addAuthTokenInterceptor: HttpInterceptorFn = (req, next) => {
	req = req.clone({
		headers: req.headers.append('Authorization', 'my-token')
	})

	return next(req)
}

O código acima pode ficar em um arquivo TypeScript chamado add-auth-token.interceptor.ts.

Note que para alterar a variável req (que é a requisição de fato) precisamos usar o método clone para criar uma nova instância. Essa abordagem é necessário pois cada objeto de requisição HTTP é imutável.

Como usar um interceptor

Para usar o interceptor basta adicioná-lo como parâmetro na função withInterceptors da função provideHttpClient:

export const appConfig: ApplicationConfig = {
	providers: [provideHttpClient(withInterceptors([addAuthTokenInterceptor]))]
}

O código acima é referente ao conteúdo do arquivo app.config.ts.

Pronto! Agora é só fazer requisições HTTP utilizando o serviço HttpClient e verificar se o interceptor fez as alterações esperadas.

Conclusão

Simples, não?

Interceptors é uma das funcionalidades mais poderosas do Angular devido a sua simplicidade em padronizar a manipulação de requisições HTTP em massa.

No próximo artigo você aprenderá como testar Interceptors da forma mais confiável e eficiente possível.