Hoje eu vou te mostrar como eu resolvo o problema de refresh token nas minhas aplicações! 🤩
O problema:
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.
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!
⚠️ Alerta!
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…
1º Primeiro passo:
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.
2º Segundo passo:
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!
Simples né?!
Bom, é isso, espero que tenha gostado!