vue.js - vue js 中 main.js 中 axios 重试的响应

Question

我有一个名为 getUsers 的方法，它位于 Users 组件中的创建 Hook 中，我的本地存储中有访问 token 和刷新 token 。

我希望当我的 token 过期时，我使用刷新 token 并获取新的访问 token 并重试上一个由于访问 token 过期而失败的请求。

我的问题是我想在第一个 axios 调用点(在 Users 组件中创建的钩子(Hook))中获得第二次 axios 调用的响应，因为我从响应中填充表

我该怎么做？

ma​​in.js:

    axios.interceptors.request.use((config) => {
      config.headers['Content-Type'] = `application/json`;
      config.headers['Accept'] = `application/json`;
      config.headers['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
      return config;
    }, (err) => {
      return Promise.reject(err);
    });

    let getRefreshError = false
    axios.interceptors.response.use((response) => {
        return response
      },
      (error) => {
        const originalRequest = error.config;
        if (!getRefreshError && error.response.status === 401) {
          axios.post(process.env.VUE_APP_BASE_URL + process.env.VUE_APP_REFRESH_TOKEN,
            {refresh_token: localStorage.getItem("refresh_token")})
            .then(res => {
              localStorage.setItem("access_token", res.data.result.access_token);
              localStorage.setItem("refresh_token", res.data.result.refresh_token);
              originalRequest.headers['Authorization'] = localStorage.getItem("access_token");
              return axios(originalRequest)
                .then((res) => {
                  return Promise.resolve(res);
                }, (err) => {
                return Promise.reject(err);
              });
            }).catch(error => {
            getRefreshError = true;
            router.push('/pages/login')
            return Promise.reject(error);
          })
        }
        return Promise.reject(error);
    });

用户:

    created() {
         this.getUsers();
    }

Answer 1

您可以从响应拦截器的错误处理程序返回一个新的 Promise。在那里刷新 token ，执行原始请求并根据操作结果(刷新和重新获取)解决 promise 。这是您应该执行的操作的概要。

axios.interceptors.response.use(
  (res => res),
  (err => {
    return new Promise(resolve, reject) => {

      // refresh token
        // then save the token
           // then reperform original request
           // and resolve with the response of the original request.

             resolve(resOfSecondRequest)

           // in case of any error, reject with the error
           // and catch it where original call was performed just like the normal flow
             reject(errOfSecondRequest)

    }
  })
)