Итак. Я вызываю 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.
Так что мне интересно, как чтобы сделать это после обновления токена, возобновите код, который должен был быть выполнен, если запрос был успешным. Что мне делать в этом случае?
Заранее спасибо.