Last active
July 7, 2020 07:43
-
-
Save Fed0t/8945883330eca4e4d6971a81a6424d9f to your computer and use it in GitHub Desktop.
jsx reactjs axios redux refreshToken interceptor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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