javascript - 如何在不使用 axios 拦截器进行整页刷新的情况下刷新 vuejs 中的 accesstoken

Question

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

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

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

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

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

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