0Pricing
Angular Academy · Aula

Adicionando cabeçalhos de autenticação

Anexe tokens às requisições enviadas.

Adicionando cabeçalhos de autenticação é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

Por que usar interceptors para autenticação

A maioria das APIs exige um cabeçalho Authorization em todas as requisições. Em vez de adicioná-lo manualmente a cada chamada, um interceptor o insere automaticamente em todas as requisições de saída.

Clonando para adicionar um cabeçalho

Como as requisições são imutáveis, use clone com setHeaders para anexar o token.

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

Lendo o token de um serviço

Injete um serviço de autenticação/token para obter o token atual. Usar um signal ou BehaviorSubject dentro dele mantém o valor atualizado.

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

Ignorando quando não há token

Se o usuário não estiver conectado, encaminhe a requisição original sem alterações.

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

Anexando somente à sua API

Não exponha seu token a URLs de terceiros. Proteja essa lógica verificando se a URL da requisição pertence ao seu backend.

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

setHeaders versus headers.set

setHeaders em clone é a forma concisa. Você também pode usar req.headers.set(...) e passá-lo por meio de { headers }. setHeaders mescla os cabeçalhos; não substitui todos eles.

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

Adicionando vários cabeçalhos

Anexe vários cabeçalhos de uma só vez em um único clone.

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

withCredentials para cookies

Se a autenticação usar cookies HttpOnly em vez de tokens, defina withCredentials para que o navegador os envie entre origens.

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

Atualizando um token expirado

Para atualizar um token, o interceptor pode capturar um 401, solicitar um novo token e, então, repetir a requisição original — um padrão mais avançado, abordado no tratamento de erros.

Mantendo o interceptor puro

O interceptor deve ler o token e clonar a requisição — evite iniciar navegações ou executar lógica pesada aqui. Mantenha as responsabilidades concentradas para que o pipeline de requisições permaneça previsível.

Registrando o interceptor de autenticação

Coloque-o no início da cadeia para que o cabeçalho esteja presente antes da execução do logging ou de outros interceptors.

provideHttpClient(
  withInterceptors([authInterceptor, loggingInterceptor])
)

Verificação rápida

Teste sua compreensão sobre a adição de cabeçalhos de autenticação.

Recapitulação: adicionando cabeçalhos de autenticação

Um interceptor de autenticação anexa o token às requisições de saída.

  • Use clone com setHeaders: { Authorization: ... }.
  • Ignore quando não houver token; restrinja à URL da sua API.
  • Use withCredentials para autenticação por cookies.

A seguir: tratando erros globalmente.

Perguntas Frequentes

A aula “Adicionando cabeçalhos de autenticação” é grátis?

Sim — o texto completo de “Adicionando cabeçalhos de autenticação” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Adicionando cabeçalhos de autenticação”?

Anexe tokens às requisições enviadas. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Adicionando cabeçalhos de autenticação”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Interceptadores funcionais
  2. Adicionando cabeçalhos de autenticação
  3. Tratamento global de erros
  4. Novas tentativas e indicadores de carregamento
← Voltar para Angular Academy