После обновления токена возобновите код из запроса, который не удался - PullRequest
0 голосов
/ 06 января 2020

Итак. Я вызываю API, который возвращает все профили, с которыми пользователь может дружить. Если запрос не выполнен из-за истечения срока действия токена доступа, обновите sh токен доступа и повторите попытку.

Это мой код, который обрабатывает обновление токена:

Vue.prototype.$http.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response.status !== 401) {
      return new Promise((resolve, reject) => {
        reject(error);
      });
    }

    if (
      error.config.url ==
      "refresh/token/url"
    ) {
      localStorage.removeItem("access_token");
      localStorage.removeItem("refresh_token");
      router.push("/");

      return new Promise((resolve, reject) => {
        reject(error);
      });
    }

    let tokenPromise = new Promise((resolve, reject) => {
      Axios.post("refresh/token/url", {
        refresh: store.getters.refresh_token
      })
        .then(response => {
          store.commit("setAccessToken", response.data.access);

          resolve(response);
        })
        .catch(error => {
          reject(error);
        });
    });

    tokenPromise
      .then(token => {
        const config = error.config;
        const newToken = `Bearer ${token.data.access}`;

        config.headers["Authorization"] = newToken;
        return new Promise((resolve, reject) => {
          Axios.request(config)
            .then(response => {
              localStorage.setItem("access_token", newToken);
              Vue.prototype.$http.defaults.headers.common["Authorization"] = newToken;
              resolve(response);
            })
            .catch(error => {
              reject(error);
            });
        });
      })
      .catch(error => {
        Promise.reject(error);
      });
  }
);

И это мой компонент код:

HTML, который отображает компонент:

<li v-for="profile in storeCompetitors" v-bind:key="profile.id">
        <Competitor/>
</li>

Часть сценария:

import Competitor from "../components/Competitor";

export default {
  name: "FindCompetitors",
  components: {
    Competitor
  },
  data() {
    return {
      profiles: []
    };
  },
  mounted() {
    this.$http({
      url: . . .
      method: "GET"
    }).then(response => {
      response.data.forEach(profile => {
        // make some changes to each profile then push it

        this.profiles.push(profile);
      });

      this.$store.commit("addCompetitors", this.profiles);
    });
  },
  computed: {
    storeCompetitors() {
      return this.$store.getters.competitors;
    }
  }
};
</script>

Сейчас .. Моя проблема: после обновления токена и я снова вызываю API, конкуренты не отображаются с этой строки:

this.$store.commit("addCompetitors", this.profiles);

не возобновляется, поэтому конкуренты не добавляются в магазин Vuex.

Так что мне интересно, как чтобы сделать это после обновления токена, возобновите код, который должен был быть выполнен, если запрос был успешным. Что мне делать в этом случае?

Заранее спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...