Я создаю PWA, в котором пользователи входят в систему, чтобы вводить производственные данные в форму и отправлять их на сервер для последующей обработки. Я использую токен JWT для управления статусом пользователя. Я использую перехватчики Axios, чтобы проверить, что токен свежий / просрочен. В последнем случае я обновляю токен.
Моя текущая проблема заключается в том, что я не знаю, как автоматически повторно отправить данные, введенные пользователем, если при отправке формы выяснилось, что срок их действия истек и был создан новый.
Итак, в моем файле bootstrap.js есть:
window.axios.interceptors.response.use((response) => {
return response;
}, error => {
let pathUrl = error.config.url;
if (error.response.status !== 401) {
return new Promise((resolve, reject) => {
reject(error);
});
}
if (pathUrl == '/api/question' || error.response.message == 'Your session has expired; please log in again.') {
getRefreshToken();
return Promise.reject(error)
}
});
function getRefreshToken() {
window.axios.post('/api/auth/refresh')
.then(response => {
const token = response.data.access_token
localStorage.setItem('token', token)
const JWTtoken = 'Bearer ' + token
window.axios.defaults.headers.common['Authorization'] = JWTtoken;
})
}
Метод отправки формы в компоненте, в который вводятся данные:
submitData () {
let vm = this;
if (vm.$v.formvar.$pending || vm.$v.formvar.$error) return;
axios.post('/api/question',vm.formvar)
.then(res => {
this.$router.push('/' + this.$i18n.locale + res.data.path)
})
},
Любая помощь здесь будет принята с благодарностью.
Спасибо / Том
1 ответ
Вы можете попробовать использовать window.axios.request(error.config)
для повторной отправки запроса
if (pathUrl == '/api/question' || error.response.message == 'Your session has expired; please log in again.') {
return getRefreshToken()
.then(JWTtoken => {
error.config.headers['Authorization'] = JWTtoken
return window.axios.request(error.config)
})
}
getRefreshToken
должен вернуть обещание
function getRefreshToken() {
return window.axios.post('/api/auth/refresh')
.then(response => {
const token = response.data.access_token
localStorage.setItem('token', token)
const JWTtoken = 'Bearer ' + token
window.axios.defaults.headers.common['Authorization'] = JWTtoken;
return JWTtoken
})
}
Похожие вопросы
Новые вопросы
vue.js
Vue.js - это прогрессивная среда Javascript с открытым исходным кодом для создания пользовательских интерфейсов, которые стремятся к постепенному внедрению. Vue.js в основном используется для фронт-энда и требует промежуточного уровня HTML и CSS. Вопросы, связанные с версией Vue.js, должны быть помечены [vuejs2] или [vuejs3].