Created
January 14, 2018 14:20
-
-
Save mkozhukharenko/1210cebda655d03afc6c3408e12b601c to your computer and use it in GitHub Desktop.
Axios with refresh handlig
This file contains hidden or 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 axios from 'axios'; | |
import { IUser } from '../types/index'; | |
let isRefreshing = false; | |
let refreshSubscribers: any = []; | |
export const API_VERSION = 'v1'; | |
export const BACKEND_API_URL = process.env.NODE_ENV === 'development' | |
? '//127.0.0.1:3000' | |
: process.env.REACT_APP_BACKEND_API_URL || `${window.location.protocol}//${window.location.hostname}`; | |
const instance = axios.create({ | |
baseURL: `${BACKEND_API_URL}/${API_VERSION}`, | |
headers: { | |
'Content-Type': 'application/json; charset=UTF-8', | |
Authorization: `Bearer ${localStorage.getItem('accessToken')}`, | |
Cookie: `cookie1=value; cookie2=value; cookie3=value;` // <<-- | |
}, | |
withCredentials: true, | |
}); | |
instance.interceptors.response.use(response => { | |
return response; | |
}, error => { | |
const { config, response: { message} } = error; | |
const originalRequest = config; | |
if (message === 'jwt expired') { | |
if (!isRefreshing) { | |
isRefreshing = true; | |
refreshAccessToken() | |
.then(newAcceessToken => { | |
isRefreshing = false; | |
onRrefreshed(null, newAcceessToken); | |
}) | |
.catch((err) => { | |
console.log('refresh token error:', err) | |
onRrefreshed(err, ''); | |
}) | |
} | |
const retryOrigReq = new Promise((resolve, reject) => { | |
subscribeTokenRefresh((err, token) => { | |
if (err) { | |
return reject(err); | |
} | |
console.log('retrying with new token...', token) | |
// replace the expired token and retry | |
originalRequest.headers.Authorization = 'Bearer ' + token; | |
resolve(axios(originalRequest)); | |
}); | |
}); | |
return retryOrigReq; | |
} else { | |
return Promise.reject(error); | |
} | |
}); | |
function subscribeTokenRefresh(cb: any) { | |
refreshSubscribers.push(cb); | |
} | |
function onRrefreshed(error: any, token: string) { | |
refreshSubscribers.map(cb => cb(error, token)); | |
} | |
function refreshAccessToken(): Promise<string> { | |
const refreshToken = window.localStorage.getItem('refreshToken'); | |
const userStr = window.localStorage.getItem('user'); | |
const user: IUser = JSON.parse(userStr || ''); | |
return axios | |
.post(`${BACKEND_API_URL}/auth/refresh`, { | |
email: user && user.email, | |
refreshToken | |
}) | |
.then(({data}) => { | |
console.log('refresh token result', data) | |
window.localStorage.setItem('accessToken', data.accessToken); | |
window.localStorage.setItem('refreshToken', data.refreshToken); | |
window.localStorage.setItem('expiresIn', data.expiresIn); | |
instance.defaults.headers.common.Authorization = 'Bearer ' + data.accessToken; | |
return data.accessToken; | |
}) | |
} | |
export default instance |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment