I'm currently working on updating the access token using a refresh token if the current token has expired in my application. Below is the code I have in place:
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);
}
}
})
The code successfully retrieves a new access token from the server, but there's an issue. Users need to manually refresh the page for the new Auth Headers to take effect, which is not user-friendly as it could lead to disruptions during ongoing actions.
How can I ensure a smooth transition of tokens without requiring users to manually refresh the page?