在 Vuejs/Laravel 中刷新 JWT 令牌后如何将数据重新发布到服务器

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 应该返回一个 Promise

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