I am trying to request a new access token using a refresh token if the current access token is expired. I have the following code setup for this
axios.interceptors.response.use(undefined, function(error) {
if (error) {
const originalRequest = error.config;
if (error.response.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
axios.post("auth/refresh", {
refreshToken: store.state.refreshToken
}).then(res => {
store.dispatch('setToken', res.data.token)
store.dispatch('setRefToken', res.data.refreshToken)
error.config.headers[
"Authorization"
] = `Bearer ${res.data.token}`;
})
} else {
return Promise.reject(error);
}
}
})
This seems to work and get the new access token from the server. The problem now is this, I need to refresh the page for the new Auth Headers to be set and that is not ideal since a logged-in user may be performing an action and may not know to refresh the page after the token expires.
How can I achieve this and ensure the user does not experience any glitch?
axios.interceptors.response.use(
(res) => {
return res;
},
async (err) => {
const originalConfig = err.config;
if (originalConfig.url !== "/login" && err.response) {
if (err.response.status === 401 && !originalConfig._retry) {
originalConfig._retry = true;
try {
const rs = await axios.post("auth/refresh", {
refreshToken: store.state.refreshToken
});
const {
token,
refreshToken
} = rs.data;
store.dispatch('setToken', token)
store.dispatch('setRefToken', refreshToken)
err.config.headers[
"Authorization"
] = `Bearer ${token}`;
return new Promise((resolve, reject) => {
axios.request(originalConfig).then(response => {
resolve(response);
}).catch((err) => {
reject(err);
})
});
} catch (_error) {
return Promise.reject(_error);
}
}
}
return Promise.reject(err);
}
);
Update: I did a lot of digging and read through a lot of articles to see what was wrong with my initial code and approach. And I found a fix that suits my use case perfectly. It's a bit messy but works.