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!