Question

我们有一个vue.js应用程序，其中包含通过全局Axios实例进行网络调用的各种组件。每个网络呼叫都需要一个带有JWT的Authorization：Bearer标头。

我们还利用Axios All / Spread功能同时从我们的API中获取多个资源。以下是传播函数的示例：

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

我已经向我的全局axios实例添加了一个Axios请求拦截器，以便在当前JWT即将到期时获取新的JWT，或者如果完全过期，则向用户提供一个登录弹出窗口以重新进行身份验证。

看起来像这样：

axios.interceptors.request.use((config) => {
  if (jwtNearlyExpired(token)) {
    return fetchRenewedToken().then((response) => {
      config.headers['Authorization'] = 'Bearer ' + response.data.token
      return config
    })
  } else if (jwtIsExpired(token)) {
    return triggerLoginPopup().then((response) => {
      config.headers['Authorization'] = 'Bearer ' + response.data.token
      return config
    })
  } else {
    config.headers['Authorization'] = 'Bearer ' + token
    return config
  }
}, (error) => {
  return Promise.reject(error)
})

我遇到的问题是spread函数同时触发多个异步调用，所以我可以举例说明我通过拦截器同时触发3个登录弹出窗口。

在进行Axios通话之前，是否有更好的方法可以通过Axios更新/管理JWT和登录流程？

使用具有all和spread功能的axios来更新和附加JWT

0 个答案: