Axios 攔截器在 React JS 中不起作用

Question

我在我的 React JS 應用程序中使用以下代碼作為攔截器來取回令牌，但不幸的是，它不起作用。 刷新令牌返回新的 idToken 並正確更新本地存儲數據。 我正在使用其他一些運行良好的應用程序的相同代碼。 一個主要區別是我目前使用的是 React 18 和之前的 16 。 我努力找出問題所在，但失敗了。 你的幫助將是可觀的。

axios.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response.status === 401) {
      // console.log(error.response.data.code)
      let usersData = JSON.parse(localStorage.getItem("userData"));
      const refreshToken = usersData.refreshToken;
      return axios
        .post(
          `${api_base_url}/auth/authentication/refresh_token`,
          JSON.stringify({
            refresh_token: refreshToken,
          })
        )
        .then((response) => {
          usersData["accessToken"] = response.data.data.accessToken;
          usersData["idToken"] = response.data.data.idToken;

          setSessionStorage("userData", usersData);

          error.response.config.headers[
            "Authorization"
          ] = `Bearer ${response.data.data.idToken}`;

          return axios(error.response.config);
        })
        .catch((error) => {
          if (error.response.data.code !== "TOKEN_EXPIRED") {
            return;
          }
          localStorage.clear();
          window.location = "/login";
        });
    }
    return Promise.reject(error);
  }
);

function getIRequestProp(severType, isMultipart, isSocial) {
    const serverUrl = severType ? social_api_base_url : api_base_url;
    let userData = JSON.parse(localStorage.getItem('userData'));
    let idToken;
    idToken = userData !== null ? userData['idToken'] : '';
    let content_type;
    if (isSocial) {
        content_type = 'application/x-www-form-urlencoded'
    } else {
        content_type = isMultipart ? 'multipart/form-data' : 'application/json'
    }

    return {
        serverUrl: serverUrl,
        requestHeader: {
            'Content-Type': content_type,
            'Accept-Language': DEFAULT_LANGUAGE,
            Authorization: `Bearer ${idToken}`
        }
    };
}

async function post(url, body, isSocialServer, isMultipart) {
    const {serverUrl, requestHeader} = getIRequestProp(isSocialServer, isMultipart);
    return axios.post(serverUrl + url, body, {
        headers: requestHeader
    });
}

所以，我這樣調用 API：

   AxiosServices.post(ApiUrlServices.SOCIALS_UPDATE_LINKS(UserInfo.userId), payload, false)
        .then(response => {})

我發現return axios(error.response.config); 未在 API 請求標頭中發送授權令牌並無限嘗試請求。 但安慰error.response.config正確顯示配置中的令牌集。

Answer 1

添加對 axios 請求的額外修改，我解決了我的問題。

axios.interceptors.request.use(request => {
    // Edit request config
    let usersData = JSON.parse(localStorage.getItem('userData'));
    request.headers['Authorization'] = `${usersData.idToken}`;
    return request;
}, error => {
    return Promise.reject(error);
});