-
Star
(231)
You must be signed in to star a gist -
Fork
(42)
You must be signed in to fork a gist
-
-
Save mkjiau/650013a99c341c9f23ca00ccb213db1c to your computer and use it in GitHub Desktop.
| let isRefreshing = false; | |
| let refreshSubscribers = []; | |
| const instance = axios.create({ | |
| baseURL: Config.API_URL, | |
| }); | |
| instance.interceptors.response.use(response => { | |
| return response; | |
| }, error => { | |
| const { config, response: { status } } = error; | |
| const originalRequest = config; | |
| if (status === 498) { | |
| if (!isRefreshing) { | |
| isRefreshing = true; | |
| refreshAccessToken() | |
| .then(newToken => { | |
| isRefreshing = false; | |
| onRrefreshed(newToken); | |
| }); | |
| } | |
| const retryOrigReq = new Promise((resolve, reject) => { | |
| subscribeTokenRefresh(token => { | |
| // replace the expired token and retry | |
| originalRequest.headers['Authorization'] = 'Bearer ' + token; | |
| resolve(axios(originalRequest)); | |
| }); | |
| }); | |
| return retryOrigReq; | |
| } else { | |
| return Promise.reject(error); | |
| } | |
| }); | |
| subscribeTokenRefresh(cb) { | |
| refreshSubscribers.push(cb); | |
| } | |
| onRrefreshed(token) { | |
| refreshSubscribers.map(cb => cb(token)); | |
| } |
what happens to this if the refresh token call fails? Isn't that going to be an infinite loop of some sort?
Failing refresh token calls respond usually with 400 (or other codes), not 401 :
401: The request has not been applied because it lacks valid authentication credentials for the target resource.
In this snippet the request is managed as long the response is 401. Otherwise no loop is involved.
Errors other than 401 must be managed based on the app logic. Eg: Logout the user and bring him to the login page
Ah that makes sense! Thank you very much! @bionic :)
Does any of above solution works for concurrent request ?
Does any of above solution works for concurrent request ?
Yes. If token is invalid, all requests goes to the queue -> refreshing token -> again same requests.
Thanks,
So we already have mechanism to send response back to source method?
what happens to this if the refresh token call fails? Isn't that going to be an infinite loop of some sort?
As mentioned aboved, this technically would most likely not happen assuming you're using a token based authentication to where the browser can read the token and renew the token.
If however, you're using something like a corporate SSO that forces you to get tokens via an iframe (and http-only access) you would need to add an infinite loop guard.
You could easily do that by adding a property to the error.config itself, like retries... which iterates by 1 every attempt.
If the retries exceeds 3, return an error instead of returning the same request.
Use Semaphores instead of a variable
I really like this approach: khinkali/cockpit#3 (comment)
Hi, I'm pretty new to React. I am building a RN app, trying to persist the authentication and refresh the token when needed/at every request. Where should this code be added and called?
Have a look at this gist...
Thank you for this gist. There is mine update using redux action for token refresh.
let isAlreadyFetchingAccessToken = false let subscribers = [] function onAccessTokenFetched(access_token) { subscribers = subscribers.filter(callback => callback(access_token)) } function addSubscriber(callback) { subscribers.push(callback) } axios.interceptors.response.use(function (response) { return response }, function (error) { const { config, response: { status } } = error const originalRequest = config if (status === 401) { if (!isAlreadyFetchingAccessToken) { isAlreadyFetchingAccessToken = true store.dispatch("Auth/refreshToken").then((access_token) => { isAlreadyFetchingAccessToken = false onAccessTokenFetched(access_token) }) } const retryOriginalRequest = new Promise((resolve) => { addSubscriber(access_token => { originalRequest.headers.Authorization = 'Bearer ' + access_token resolve(axios(originalRequest)) }) }) return retryOriginalRequest } return Promise.reject(error) })
Thanx Bro, I managed to work with this code in my Vue Project using Vuex Store dispatch and Axios. @FilipBartos
retryOriginalRequest will never be resolved if refresh token request fails
Thanks for this.
How to redirect back to /login after any 401 occurred and clear the tokens? Where to place that logic? Can you help in this regard.Thanks
The codes documented here are all convoluted and hard to follow, and remind me of callback hell. Here is the my token refresh code based on async/await syntax. Like @Flyrell's version, my version doesn't rely on queue.
Also I added the logic to avoid infinite loops and handle redirect to /login.
export function installInterceptors (store) {
request.interceptors.response.use(
resp => resp.data,
async error => {
/* refresh token and retry request once more on 401
else log user out
*/
const {config: originalReq, response} = error
// skip refresh token request, retry attempts to avoid infinite loops
if (originalReq.url !== 'auth/jwt/refresh/' && !originalReq.isRetryAttempt && response && response.status === 401) {
try {
await store.dispatch('user/refreshToken')
originalReq.isRetryAttempt = true
originalReq.headers['Authorization'] = request.defaults.headers.common['Authorization']
return await request.request(originalReq)
} catch (e) {
// log user out if fail to refresh (due to expired or missing token) or persistent 401 errors from original requests
if (e === 'user has not logged in' || (e.response && e.response.status === 401)) {
store.dispatch('user/logout', true)
}
// suppress original error to throw the new one to get new information
throw e
}
} else {
throw error
}
}
)
}action in your store:
async refreshToken ({ state, dispatch }) {
let newTokenObj = null
const refreshToken = state.tokens.refresh
if (!refreshToken) {
throw 'user has not logged in'
}
// use private variable to keep 1 active JWT refresh request at any time.
this.refreshPromise = this.refreshPromise || authService.jwtRefresh({ refresh: refreshToken })
// get new access token
try {
newTokenObj = await this.refreshPromise
} finally {
this.refreshPromise = null
}
dispatch('setTokens', newTokenObj)
}setTokens action should save the token to store, and/or a persistent storage, and set the bearer token header of axios
The codes documented here are all convoluted and hard to follow, and remind me of callback hell. Here is the my token refresh code based on async/await syntax. Like @Flyrell's version, my version doesn't rely on queue.
Also I added the logic to avoid infinite loops and handle redirect to
/login.export function installInterceptors (store) { request.interceptors.response.use( resp => resp.data, async error => { /* refresh token and retry request once more on 401 else log user out */ const {config: originalReq, response} = error // skip refresh token request, retry attempts to avoid infinite loops if (originalReq.url !== 'auth/jwt/refresh/' && !originalReq.isRetryAttempt && response && response.status === 401) { try { await store.dispatch('user/refreshToken') originalReq.isRetryAttempt = true originalReq.headers['Authorization'] = request.defaults.headers.common['Authorization'] return await request.request(originalReq) } catch (e) { // log user out if fail to refresh (due to expired or missing token) or persistent 401 errors from original requests if (e === 'user has not logged in' || (e.response && e.response.status === 401)) { store.dispatch('user/logout', true) } // suppress original error to throw the new one to get new information throw e } } else { throw error } } ) }action in your store:
async refreshToken ({ state, dispatch }) { let newTokenObj = null const refreshToken = state.tokens.refresh if (!refreshToken) { throw 'user has not logged in' } // use private variable to keep 1 active JWT refresh request at any time. this.refreshPromise = this.refreshPromise || authService.jwtRefresh({ refresh: refreshToken }) // get new access token try { newTokenObj = await this.refreshPromise } finally { this.refreshPromise = null } dispatch('setTokens', newTokenObj) }
setTokensaction should save the token to store, and/or a persistent storage, and set the bearer token header of axios
Hey , looks great . can you do full code with authService.jwtRefresh ?
Thanks
Hey , looks great . can you do full code with authService.jwtRefresh ?
Thanks
that function is just about firing a request to a backend server URL, it's different for every project, no point showing it.
@kakarukeys Thank you, I will try it
i need to reject the original err if refrest token failed, and some time the dead loop
also notice if you use nuxtjs and the nuxt axios module, use api.request replace api.$request, because api.$request only get the response data attribute.
we also need filte out the refresh request itself by url or other attribute
in store action dispatched i just use another axios instance so dont need it.
import _ from 'lodash'
let isRefreshing = false
let refreshQueue = []
const retries = 1
export default function ({ $axios, store }, inject) {
const api = $axios._create()
api.onResponseError((err) => {
const {
config: orgConfig,
response: { status },
} = err
if (status !== 401) {
return Promise.reject(err)
}
orgConfig._retry =
typeof orgConfig._retry === 'undefined' ? 0 : ++orgConfig._retry
if (orgConfig._retry === retries) {
return Promise.reject(err)
}
if (!isRefreshing) {
isRefreshing = true
store
.dispatch('user/refresh')
.then((res) => {
refreshQueue.forEach((v) => v.resolve(res))
refreshQueue = []
})
.catch(() => {
refreshQueue.forEach((v) => v.reject(err))
refreshQueue = []
})
.finally(() => {
isRefreshing = false
})
}
return new Promise((resolve, reject) => {
refreshQueue.push({
resolve: (res) => {
const config = _.merge(orgConfig, res)
resolve(api.request(config))
},
reject: (err) => {
reject(err)
},
})
})
})
inject('api', api)
}
You just saved my day @garryshield
you da man @garryshield.
love u @garryshield
const retryOrigReq = new Promise((resolve, reject) => {
subscribeTokenRefresh(token => {
// replace the expired token and retry
originalRequest.headers['Authorization'] = 'Bearer ' + token;
resolve(axios(originalRequest));
});
});
this part of the code should be before the if (!isRefreshing) block . if not the first failed request won't be retried
@ifier Have you found a solution to the problem? I have the same thing now
const retryOrigReq = new Promise((resolve, reject) => { subscribeTokenRefresh(token => { // replace the expired token and retry originalRequest.headers['Authorization'] = 'Bearer ' + token; resolve(axios(originalRequest)); }); });this part of the code should be before the if (!isRefreshing) block . if not the first failed request won't be retried
thanks, that's true
Can someone explain how to show message toast just once if for example we get from several requests 401 status at the same time ?
How to write correctly in interceptor it ? - with toggle it doesn't work - because it always jump to check by 401 status and change toggle every bad request that you get
const responseInterceptor = axiosAPI.interceptors.response.use(
response => response,
async (error) => {
const {config: originalRequest, response: {status}} = error
if (status === 401 || status === 403) {
if (!isFetchingToken) {
isFetchingToken = true
returnMessage(status).then(() => {
isFetchingToken = false
})
}
return Promise.reject(error)
}
)
I just want to one error message - and it doesn't matter how many requests I use
I would be grateful if someone could advise)
here is my axios instance file, all requests perform sequentially and if i get one 401 response, all other go to queue and relieve only after token refresh
so i don't get more then one 401
import axios, { AxiosError } from 'axios';
import { Store } from 'redux';
import axiosMiddlewareFactory from 'redux-axios-middleware';
import AppConfig from '~/config/appConfig';
import needError from '~/helpers/needError';
import { networkOffline, showError } from '~/modules/app/actions/AppActions';
import {
IRefreshTokenData,
logout,
refreshToken,
refreshTokenSuccess,
} from '~/modules/auth/actions/AuthActions';
import {
getIsAuthenticated,
getRefreshToken,
getToken,
} from '~/modules/auth/AuthSelectors';
import { ErrorCodes } from '~/modules/auth/models';
import { getProfile } from '~/modules/settings/SettingsSelector';
type IRequestCb = (token: string) => void;
export const axiosClient = axios.create({
baseURL: AppConfig.apiUrl,
responseType: 'json',
});
let isRefreshing = false;
let refreshSubscribers: IRequestCb[] = [];
let refreshRetry = true;
const subscribeTokenRefresh = (cb: IRequestCb) => {
refreshSubscribers.push(cb);
};
const onRefreshed = (token: string) => {
refreshSubscribers.map(cb => cb(token));
};
const axiosMiddlewareOptions = {
interceptors: {
request: [
({ getState }: Store, request: any) => {
const state = getState();
const token = getToken(state);
if (token) {
request.headers.authorization = `Bearer ${token}`;
}
return request;
},
],
response: [
{
error: function ({ getState, dispatch }: Store, error: AxiosError) {
const state = getState();
const accessToken = getToken(state);
const profile = getProfile(state);
const { teamId, roleId } = profile || {};
const isAuthenticated = getIsAuthenticated(state);
if (error?.response?.status === 401) {
const refresh = getRefreshToken(state);
const originalRequest = error.config;
const retryOrigReq = new Promise(resolve => {
subscribeTokenRefresh((newToken: string) => {
// replace the expired token and retry
if (originalRequest.headers) {
originalRequest.headers.authorization = `Bearer ${newToken}`;
}
resolve(axios(originalRequest));
});
});
if (!isRefreshing && accessToken && refresh && roleId && teamId) {
isRefreshing = true;
refreshToken({
accessToken,
refreshToken: refresh,
roleId,
teamId,
})
.then(
({
accessToken: newAccessToken,
refreshToken: newRefreshToken,
}: IRefreshTokenData) => {
if (originalRequest.headers) {
originalRequest.headers.authorization = `Bearer ${newAccessToken}`;
dispatch(
refreshTokenSuccess({
accessToken: newAccessToken,
refreshToken: newRefreshToken,
roleId,
teamId,
}),
);
refreshRetry = true;
onRefreshed(newAccessToken);
}
},
)
.catch(e => {
Bugsnag.notify(e);
if (
e.response?.data?.error &&
needError(e.response?.config)
) {
dispatch(showError(e.response?.data.error));
} else if (refreshRetry) {
refreshRetry = false;
} else {
dispatch(
showError(
'Unable to restore session. Please login again',
),
);
dispatch(logout());
}
return Promise.reject(error);
})
.finally(() => {
isRefreshing = false;
});
}
return retryOrigReq;
} else if (error?.response?.status === 403) {
// user deactivated
dispatch(
showError(
'Your account has been locked. Contact your support person to unlock it, then try again.',
),
);
dispatch(logout());
} else if (
[
ErrorCodes.passwordExpired,
ErrorCodes.accountDeleted,
ErrorCodes.accountLocked,
].includes(error?.code as ErrorCodes)
) {
if (isAuthenticated) {
// password expired, account deleted, locked
dispatch(showError(error.message));
dispatch(logout());
}
} else {
if (error.code === ErrorCodes.network) {
dispatch(networkOffline());
} else if (
((error.response?.data as { error: string })?.error ||
error.message) &&
needError(error.response?.config)
) {
dispatch(
showError(
(error.response?.data as { error: string })?.error ||
error.message,
),
);
}
return Promise.reject(error);
}
},
},
],
},
};
const axiosMiddleware = axiosMiddlewareFactory(
axiosClient,
axiosMiddlewareOptions,
);
export default axiosMiddleware;
FishManHell
here is my axios instance file, all requests perform sequentially and if i get one 401 response, all other go to queue and relieve only after token refresh so i don't get more then one 401
import axios, { AxiosError } from 'axios'; import { Store } from 'redux'; import axiosMiddlewareFactory from 'redux-axios-middleware'; import AppConfig from '~/config/appConfig'; import needError from '~/helpers/needError'; import { networkOffline, showError } from '~/modules/app/actions/AppActions'; import { IRefreshTokenData, logout, refreshToken, refreshTokenSuccess, } from '~/modules/auth/actions/AuthActions'; import { getIsAuthenticated, getRefreshToken, getToken, } from '~/modules/auth/AuthSelectors'; import { ErrorCodes } from '~/modules/auth/models'; import { getProfile } from '~/modules/settings/SettingsSelector'; type IRequestCb = (token: string) => void; export const axiosClient = axios.create({ baseURL: AppConfig.apiUrl, responseType: 'json', }); let isRefreshing = false; let refreshSubscribers: IRequestCb[] = []; let refreshRetry = true; const subscribeTokenRefresh = (cb: IRequestCb) => { refreshSubscribers.push(cb); }; const onRefreshed = (token: string) => { refreshSubscribers.map(cb => cb(token)); }; const axiosMiddlewareOptions = { interceptors: { request: [ ({ getState }: Store, request: any) => { const state = getState(); const token = getToken(state); if (token) { request.headers.authorization = `Bearer ${token}`; } return request; }, ], response: [ { error: function ({ getState, dispatch }: Store, error: AxiosError) { const state = getState(); const accessToken = getToken(state); const profile = getProfile(state); const { teamId, roleId } = profile || {}; const isAuthenticated = getIsAuthenticated(state); if (error?.response?.status === 401) { const refresh = getRefreshToken(state); const originalRequest = error.config; const retryOrigReq = new Promise(resolve => { subscribeTokenRefresh((newToken: string) => { // replace the expired token and retry if (originalRequest.headers) { originalRequest.headers.authorization = `Bearer ${newToken}`; } resolve(axios(originalRequest)); }); }); if (!isRefreshing && accessToken && refresh && roleId && teamId) { isRefreshing = true; refreshToken({ accessToken, refreshToken: refresh, roleId, teamId, }) .then( ({ accessToken: newAccessToken, refreshToken: newRefreshToken, }: IRefreshTokenData) => { if (originalRequest.headers) { originalRequest.headers.authorization = `Bearer ${newAccessToken}`; dispatch( refreshTokenSuccess({ accessToken: newAccessToken, refreshToken: newRefreshToken, roleId, teamId, }), ); refreshRetry = true; onRefreshed(newAccessToken); } }, ) .catch(e => { Bugsnag.notify(e); if ( e.response?.data?.error && needError(e.response?.config) ) { dispatch(showError(e.response?.data.error)); } else if (refreshRetry) { refreshRetry = false; } else { dispatch( showError( 'Unable to restore session. Please login again', ), ); dispatch(logout()); } return Promise.reject(error); }) .finally(() => { isRefreshing = false; }); } return retryOrigReq; } else if (error?.response?.status === 403) { // user deactivated dispatch( showError( 'Your account has been locked. Contact your support person to unlock it, then try again.', ), ); dispatch(logout()); } else if ( [ ErrorCodes.passwordExpired, ErrorCodes.accountDeleted, ErrorCodes.accountLocked, ].includes(error?.code as ErrorCodes) ) { if (isAuthenticated) { // password expired, account deleted, locked dispatch(showError(error.message)); dispatch(logout()); } } else { if (error.code === ErrorCodes.network) { dispatch(networkOffline()); } else if ( ((error.response?.data as { error: string })?.error || error.message) && needError(error.response?.config) ) { dispatch( showError( (error.response?.data as { error: string })?.error || error.message, ), ); } return Promise.reject(error); } }, }, ], }, }; const axiosMiddleware = axiosMiddlewareFactory( axiosClient, axiosMiddlewareOptions, ); export default axiosMiddleware;FishManHell
Hi, I hope you're doing well.
can you please show an example that how to make a request?
could I just use axios client?
thanks
you need to clear array after callbacks
onRrefreshed(token) {
refreshSubscribers.map(cb => cb(token));
refreshSubscribers = [];
}
what happens to this if the refresh token call fails? Isn't that going to be an infinite loop of some sort?