Escolha uma Página

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

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!