This is my current code:

axios.interceptors.response.use(
    (response) => {
      return response;
    },
    (error) => {
      const originalRequest = error.config;

      if (error.response.status === 401 && !originalRequest._retry) {
        originalRequest._retry = true;

        axios.get("/auth/token").then((res) => {
          if (res.status === 200) {
            console.log("Access token refreshed");
            return axios(originalRequest);
          }
        });

      } else {
        return Promise.reject(error);
      }
    }
  );

It's refreshing the token as expected, but it's not retrying the original request. If the request was to, let's say, display some data, I'm only able to see it if I reload the page or change to some other route and back again to re-render the component.

In my understanding, if the original request hits an error 401, then the interceptor should refresh the token and retry that call - which would trigger the interceptor again, but now would get a successful response - and pass this new response back to the original promise, right?

CodePudding user response：

You need to return the axios function:

... 

return axios.get("/auth/token").then((res) => {
          if (res.status === 200) {
            console.log("Access token refreshed");
            return axios(originalRequest);
          }
        });