Axios：由拦截器处理但仍被拒绝的错误

Question

我正在使用 axios 拦截器构建一个 jwt 令牌刷新逻辑（到期时刷新身份验证令牌）。 刷新部分运行良好：axios 拦截错误，刷新令牌，并重试请求（并成功从服务器获得应答）。

但是，由于令牌过期而发出请求失败的页面仍然会捕获错误。 我觉得 axios 仍然将错误返回给进行调用的函数，而不是仅仅返回重试请求，但我知道如何。

这是我的 axios.js 文件中的代码：

import { boot } from "quasar/wrappers";
import axios from "axios";
import * as storage from "../helpers/storage";
import store from "../store/index.js";
import router from "../router/index.js";

const api = axios.create({
  baseURL: process.env.API_URL,
  crossdomain: true,
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json",
  },
});

api.interceptors.request.use(
  function (config) {
    if (config.url !== "/register") {
      const accessToken = storage.getAccessToken();
      if (accessToken) {
        config.headers.Authorization = "Bearer " + accessToken;
      }
    }
    return config;
  },
  function (error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

api.interceptors.response.use(
  function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  },
  function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    if (error.response.data.message === "Expired JWT Token") {
      const originalRequest = error.config;
      api
        .post("/token/refresh", { refresh_token: storage.getRefreshToken() })
        .then(({ data }) => {
          if (data !== undefined) {
            storage.setTokens(data.token, data.refresh_token);
          }
          originalRequest.headers = { Authorization: `Bearer ${data.token}` };

          return new Promise(() => {
            axios.request(originalRequest).then((response) => {
              return response;
            });
          });
        })
        .catch((error) => {
          console.error(error);
        });
    } else if (error.response.data.message === "Invalid JWT Token") {
      console.log("error");
      store()
        .dispatch("auth/logout")
        .then(() => {
          router().push({
            name: "register-login",
            query: { error: "invalid_token" },
          });
          router().go(0);
          store().dispatch("setLoading", false);
        });
    } else {
      return Promise.reject(error);
    }
  }
);

export default boot(({ app }) => {
  // for use inside Vue files (Options API) through this.$axios and this.$api

  app.config.globalProperties.$axios = axios;
  // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
  //       so you won't necessarily have to import axios in each vue file

  app.config.globalProperties.$api = api;
  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
  //       so you can easily perform requests against your app's API
});

export { axios, api };

这是我提出的一个请求示例：

export function sendTags(context, payload) {
  return new Promise((resolve, reject) => {
    api
      .post("/spot/addTags", payload)
      .then(({ data }) => {
        resolve(data);
      })
      .catch((error) => {
        reject(error.response.data);
      });
  });

知道可能出了什么问题吗？

Answer 1

您没有在响应拦截器的错误函数中返回成功结果。

api.interceptors.response.use(
  function (response) {
    return response;
  },
  function (error) {
    if (error.response.data.message === "Expired JWT Token") {
      

     // You didn't return here!

     // change to:
      return api.post()
          .than(() => {

            // resolve the final result here
            return axios.request(originalRequest)
          })
    
    }
  }
)