如何在vuejs中刷新accesstoken而不使用axios拦截器进行全页刷新答案

【问题标题】：How to refresh accesstoken in vuejs without doing a full page refresh using axios interceptors如何在vuejs中刷新accesstoken而不使用axios拦截器进行全页刷新
【发布时间】：2021-09-26 22:43:16
【问题描述】：

如果当前访问令牌已过期，我正在尝试使用刷新令牌请求新的访问令牌。我为此设置了以下代码

axios.interceptors.response.use(undefined, function(error) {
  if (error) {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      axios.post("auth/refresh", {
        refreshToken: store.state.refreshToken
      }).then(res => {
        store.dispatch('setToken', res.data.token)
        store.dispatch('setRefToken', res.data.refreshToken)
        error.config.headers[
          "Authorization"
        ] = `Bearer ${res.data.token}`;
      })
    } else {
      return Promise.reject(error);
    }
  }
})

这似乎工作并从服务器获取新的访问令牌。现在的问题是，我需要刷新页面以设置新的 Auth Headers，这并不理想，因为登录的用户可能正在执行操作并且可能不知道在令牌过期后刷新页面。

我怎样才能做到这一点并确保用户不会遇到任何故障？

【问题讨论】：

令牌刷新后是否有逻辑重试originalRequest？
另外，如果在axios.post("auth/refresh" ...) 在飞行中（在更新令牌之前）发出第二次请求怎么办 - 你最终会得到第二次刷新请求
我最初尝试重试 originalRequest，但这并没有解决我的问题......也许我错过了什么。

标签： javascript vue.js axios

【解决方案1】：

axios.interceptors.response.use(
  (res) => {
    return res;
  },
  async (err) => {
    const originalConfig = err.config;
    if (originalConfig.url !== "/login" && err.response) {
      if (err.response.status === 401 && !originalConfig._retry) {
        originalConfig._retry = true;
        try {
          const rs = await axios.post("auth/refresh", {
            refreshToken: store.state.refreshToken
          });
          const {
            token,
            refreshToken
          } = rs.data;
          store.dispatch('setToken', token)
          store.dispatch('setRefToken', refreshToken)
          err.config.headers[
            "Authorization"
          ] = `Bearer ${token}`;
          return new Promise((resolve, reject) => {
            axios.request(originalConfig).then(response => {
              resolve(response);
            }).catch((err) => {
              reject(err);
            })
          });
        } catch (_error) {
          return Promise.reject(_error);
        }
      }
    }
    return Promise.reject(err);
  }
);

更新：我进行了大量挖掘并阅读了很多文章，以了解我最初的代码和方法有什么问题。我找到了一个非常适合我的用例的修复程序。这有点乱，但有效。

【讨论】：