How to refresh accesstoken in vuejs without doing a full page refresh using axios interceptors

user_10540837 0
Viewed 811

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 vue.js javascript
1 Answers
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.

user_105408370
Related