Refresh Token com Axios Interceptors e fila de requisições

Hoje eu vou te mostrar como eu resolvo o problema de refresh token nas minhas aplicações! 🤩

A um tempo atrás eu estava com problemas de refreshToken na aplicação de um cliente, o que acontecia era que a página Dashboard chamava 3 endpoints diferentes, e quando dava erro 401 (Unauthorized), meu interceptor que criei dentro do Axios disparava 3 vezes a requisição de refreshToken ocasionando uma série de erros.

Até que através de alguns conteúdos que encontrei pela internet e um vídeo da Rocketseat consegui criar uma fila de requisições para solucionar esse problema, e hoje vou te mostrar como eu fiz isso!

Então bora fazer isso funcionar?!

Primeiro passo, o que é Axios?

O Axios é um cliente HTTP, que funciona tanto no browser quanto em Node.Js. A biblioteca é basicamente uma API que sabe interagir tanto com XMLHttpRequest quanto com a interface HTTP do Node. Isso significa que o mesmo código utilizado para fazer requisições Ajax no browser também funciona no lado do servidor.

E agora que você já sabe o que é Axios, vamos falar sobre Interceptors

Os Interceptors são como o próprio nome diz, interceptadores. No Axios a gente consegue utiliza-los para executar alguma função antes que a Request e/ou Response seja iniciada.

Segue um exemplo:

Esse exemplo você pode encontrar na própria documentação do Axios aravés desse link.

Pronto, agora chega de enrolação, e vamos para o que interessa!

Um ponto importante, é que nesse post eu vou pular as etapas de criar uma aplicação React e fazer a instalação do Axios, então caso você não saiba como fazer algum desses passos só olhar a documentação do React ou do Axios.

Continuando…

Vamos criar um arquivo chamado api.ts que vai ser responsável por armazenar toda a configuração do Axios que vai ficar dessa forma:

Nesse arquivo, criamos a configuração inicial para usar o Axios na aplicação.

Agora vamos criar o nosso interceptor que vai ser responsável por validar se houve um erro de status 401 para realizarmos o refreshToken.

Todo o código com o interceptor e a nossa fila de requisição fica assim, mas calma que eu vou te explicar o que está rolando!

  • Linha 11: Criamos uma variável para saber se já está acontecendo um refreshToken em caso de multiplas requisições que retornaram erro
  • Linha 13: Criamos uma variável para armazenar todas as requisições que deram erro, criando a nossa fila de requisições
  • Linha 31: Estamos criando o nosso Interceptor
  • Linha 32: Se a requisição der sucesso, apenas retornamos o response original
  • Linha 36: Todo erro que a requisição retornar cai nessa parte
  • Linha 38 – 40: Nessas linhas estamos apenas verificando se o erro que foi retornado pela API é um erro de autenticação
  • Linha 44: Recuperamos todo a request original para refazer quando o refreshToken for concluído
  • Linha 47: Verifica se não está acontecendo um fluxo de RefreshToken
  • Linha 51: Inicia a chamada para a API de refreshToken
  • Linha 70: Depois que a requisição de refreshToken for concluída, vamos realizar todas as outras requests que estavam na fila com o novo token gerado
  • Linha 74: Estamos voltando a fila para seu estado original
  • Linha 92: Quando já está acontecendo um refreshToken, nosso código vai cair nessa linha e vai recuperar e armazenar todas as requisições que falharam e vai armazenar na nossa variável de fila para ser executado após o sucesso do refreshToken
  • Linha 112: Caso der erro, deslogamos o usuário

Esse foi um breve resumo do que cada linha está fazendo, mas todo o código está comentado, para facilitar seu entendimento!

Pronto!

Agora toda vez que você tiver um ou mais erros de 401 (Unauthorized) na sua aplicação, automaticamente vai ser feito um refreshToken e vai ser chamado novamente as requisições que falharam sem precisar atualizar a tela!

Bom, é isso, espero que tenha gostado! E se tiver alguma sugestão deixei ai nos comentários 💬

Se gostou, dê 1 ou 50 claps 👏

Obrigado pela leitura!

Me acompanhe por ai! 😜

Senior Software Engineer | React enthusiast | Love traveling and Mountain Bike. See more about me — vinniciusgomes.dev

Senior Software Engineer | React enthusiast | Love traveling and Mountain Bike. See more about me — vinniciusgomes.dev