Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save Fed0t/8945883330eca4e4d6971a81a6424d9f to your computer and use it in GitHub Desktop.
Save Fed0t/8945883330eca4e4d6971a81a6424d9f to your computer and use it in GitHub Desktop.
jsx reactjs axios redux refreshToken interceptor
import { saveRefreshToken } from 'containers/App/actions';
const config = require(`config/config`).default;
const axios = require('axios');
let isAlreadyFetchingAccessToken = false;
let subscribers = [];
export default function setupAxiosRefreshTokenInterceptor(axiosInstance, store) {
let accessToken = store.getState().global.userData.access_token;
let refreshToken = store.getState().global.userData.refresh_token;
const unsubscribe = store.subscribe(() => {
accessToken = store.getState().global.userData.access_token;
refreshToken = store.getState().global.userData.refresh_token;
});
axiosInstance.interceptors.response.use(
response => response.data,
error => {
const errorResponse = error.response;
if (isTokenExpiredError(errorResponse)) {
return resetTokenAndReattemptRequest(error, accessToken, refreshToken);
}
return Promise.reject(error);
},
);
function isTokenExpiredError(errorResponse) {
if (errorResponse.data === 'Unauthorized' || errorResponse.status === 401)
return true;
return false;
}
function resetTokenAndReattemptRequest(error, tokenAccess, tokenRefresh) {
try {
const { response: errorResponse } = error;
const resetToken = tokenRefresh;
if (!resetToken) {
return Promise.reject(error);
}
const retryOriginalRequest = new Promise(resolve => {
addSubscriber(subscribeToken => {
errorResponse.config.headers.Authorization = `Bearer ${subscribeToken}`;
errorResponse.transformResponse = [data => data.data];
resolve(axios(errorResponse.config));
});
});
if (!isAlreadyFetchingAccessToken) {
isAlreadyFetchingAccessToken = true;
axios({
method: 'post',
headers: {
Authorization: `Bearer ${tokenAccess}`,
},
url: `${config.apiUrl}/auth/login/refresh`,
data: {
refresh_token: resetToken,
},
}).then(response => {
const newToken = response.data.access_token;
store.dispatch(saveRefreshToken(response.data));
isAlreadyFetchingAccessToken = false;
onAccessTokenFetched(newToken);
});
}
return retryOriginalRequest.then(response => response.data);
} catch (err) {
return Promise.reject(err);
}
}
function onAccessTokenFetched(subscribeToken) {
// When the refresh is successful, we start retrying the requests one by one and empty the queue
subscribers.forEach(callback => callback(subscribeToken));
subscribers = [];
}
function addSubscriber(callback) {
subscribers.push(callback);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment