Как повторно отправить данные на сервер после обновления токена JWT в Vuejs / Laravel

Question

Я создаю 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)  
      })          
  },

Любая помощь здесь будет принята с благодарностью.

Спасибо / Том

Answer 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
    })
}