CODEWITHSUNDEEP
vue.jsaxiosrefresh-token
raklos
raklos

Reputation: 28545

Return to request after refreshing tokens

I am trying to get refresh tokens working.

It works for the most part, but the problem is I'm not sure how to return to where the original call was before the access token needed refreshing.

It doesn't work the first time it refreshes, after that the token is refreshed and then it works ok again until it expires.

So the problem is I cant get it returning to where it started on the refresh

Here is an example from the component

created(){
 axios.get("http://localhost:63861/api/sampledata/WeatherForecasts").then(response => {
  console.log(response.data);
  //**** DO STUFF WITH THE DATA. I WANT TO GET BACK HERE AFTER REFRESH
})
.catch(error => {
  console.log(error);
});

I need to get back to the point where it can do stuff with the data once it has refreshed and reset the access tokens.

my interceptor:

import axios from "axios";
import store from "../store";
import Storage from "../services/storage";
import { REFRESH } from "../store/actions.type";

export default function execute() {
  // Request
  axios.interceptors.request.use(
    config => {
      var token = Storage.getAccessToken(); 
      if (token) {
        console.log("Bearer " + token);
        config.headers["Authorization"] = "Bearer " + token;
      }
      return config;
    },
    error => {
      return Promise.reject(error);
    }
  );

  // Response
  axios.interceptors.response.use(
    response => {
      return response;
    },
    error => {
      console.log("Error need to refresh");
      const originalRequest = error.config;
      // token expired
      if (error.response.status === 401) {
        originalRequest._retry = true;

        let tokenModel = {

      accessToken: Storage.getAccessToken(),
      client: "Web",
      refreshToken: Storage.getRefreshToken()
    };

    var refreshPath = "auth/" + REFRESH;
    store
      .dispatch(refreshPath, { tokenModel })
      .then(response => {
        console.log(response);
        return axios(originalRequest);
      })
      .catch(error => {
        console.log(error);
        // Logout
      });
  }
  return Promise.reject(error);
}

); }

Upvotes: 0

Views: 209

Answers (1)

LLai
LLai

Reputation: 13396

You need to return your refresh promise.

return store
  .dispatch(refreshPath, { tokenModel })
  .then(response => {
      console.log(response);
      return axios(originalRequest);
  })
  .catch(error => {
      console.log(error);
      // Logout
  });

What is happening now is you dispatch the action, then your return Promise.reject(error) is ran. By returning the refresh promise, you ensure axios waits for that chain to finish

Upvotes: 1

Related Questions