🏆🤖Clique aqui e participe da pesquisa Panorama da Inteligência Artificial Generativa no Brasil!
Refresh Token usando Axios Interceptors

Refresh Token usando Axios Interceptors

Entenda o que são Interceptors e o que é um Refresh Token.

jun 17 , 2021

Início Blog Página Atual
Tecnologia

Esta é uma republicação do post do blog do Vinnicius Gomes – Senior Frontend Engineer aqui da Zappts.

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 atravé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:

import axios from “axios”;

const api = axios.create({
 headers: {
   “Access-Control-Allow-Origin”: “*”,
   client_id: process.env.CLIENT_ID,
 },
 baseURL: process.env.API_URL,
});

export default api;

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:

import axios from “axios”;

const api = axios.create({
 headers: {
   “Access-Control-Allow-Origin”: “*”,
   client_id: process.env.CLIENT_ID,
 },
 baseURL: process.env.API_URL,
});

api.interceptors.response.use(
 (response) => {
   return response;
 },
 async function (error) {
   const access_token = localStorage.getItem(“access_token”);
   if (error.response.status === 401 && access_token) {
     const response = await refreshToken(error);
     return response;
   }
   return Promise.reject(error);
 }
);

export default api;

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:

async function refreshToken(error) {
 return new Promise((resolve, reject) => {
   try {
     const refresh_token = localStorage.getItem(“refresh_token”);
     const header = {
       “Content-Type”: “application/json”,
       Authorization: process.env.AUTHORIZATION,
     };
     const parameters = {
       method: “POST”,
       headers: header,
     };
     const body = {
       grant_type: “refresh_token”,
       refresh_token,
     };
     axios
       .post(
         process.env.API_URL + “/refreshtoken”,
         body,
         parameters
       )
       .then(async (res) => {
         localStorage.setItem(“access_token”, res.data.access_token);
         localStorage.setItem(“refresh_token”, res.data.refresh_token);
         // Fazer algo caso seja feito o refresh token
         return resolve(res);
       })
       .catch((err) => {
         // Fazer algo caso não seja feito o refresh token
         return reject(error);
       });
   } catch (err) {
     return reject(err);
   }
 });
};

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!