Estoy tratando de solicitar un nuevo token de acceso usando un token de actualización si el token de acceso actual está vencido. Tengo la siguiente configuración de código para esto
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); } } })Esto parece funcionar y obtener el nuevo token de acceso del servidor. El problema ahora es este: necesito actualizar la página para que se configuren los nuevos encabezados de autenticación y eso no es lo ideal, ya que un usuario que inició sesión puede estar realizando una acción y es posible que no sepa actualizar la página después de que expire el token.
¿Cómo puedo lograr esto y asegurarme de que el usuario no experimente ningún problema técnico?
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); } );Actualización: investigué mucho y leí muchos artículos para ver qué estaba mal con mi código y enfoque iniciales. Y encontré una solución que se adapta perfectamente a mi caso de uso. Es un poco desordenado pero funciona.