Refresh Token usando Axios Interceptors
Post atualizado: https://vinniciusgomes.medium.com/refresh-token-com-axios-interceptors-e-fila-de-requisicoes-cf5eb39ee586
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.
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:
// Adicionando um interceptor de Request
axios.interceptors.request.use(function (config) {
// Faça algo antes que a solicitação seja enviada
return config;
}, function (error) {
// Faça algo com erro da solicitação
return Promise.reject(error);
});
// Adicionando um interceptor de Response
axios.interceptors.response.use(function (response) {
// Qualquer código de status que esteja dentro de 2xx fará com que essa função seja acionada
// Faça algo com os dados de resposta
return response;
}, function (error) {
// Quaisquer códigos de status que estejam fora de 2xx fazem com que esta função seja acionada
// Faça algo com erro de resposta
return Promise.reject(error);
});
Esse exemplo você pode encontrar na própria documentação do Axios aravés desse link.
Agora que você já sabe o que é um interceptor, vamos para o que importa!
Caso você não saiba o que é um Refresh Token da uma lida aqui.
Então vamos começar o nosso Refresh Token, vamos criar um arquivo chamado api.js:
Nesse arquivo resumidamente, criamos a configuração inicial para usar o Axios na aplicação.
Agora, vamos criar um interceptor para os Responses que vamos receber da API dentro desse arquivo, algo parecido com isso:
Criamos um interceptor utilizando a constante api, verificamos se o status do erro retornando pela API foi 401, e se o usuário tem um access_token . ai chamamos a função refreshToken() que vamos criar agora:
Nessa função estamos fazendo uma nova chamada para o End Point que é responsável pelo refresh token, e caso ele nos retorne sucesso criaremos um fluxo para atualizar o token dentro da nossa aplicação onde está o comentário.
Caso a nossa requisição de refresh token tenha dado algum erro, podemos deslogar o usuário adicionando uma função aonde está o comentário na linha 30.
E é basicamente isso!
Espero que entendido o interceptor do Axios. Aproveite os interceptors para fazer tratativas de erros e de requests.
Obrigado pela leitura!
Me acompanhe por ai! 😜
- Portfólio: vinniciusgomes.dev
- GitHub: @vinniciusgomes
- LinkedIn: @vinniciusgomes