前端刷新token, 继续之前请求，调取接口返回数据。

Z时代
2024-01-10
分类：技术分享

封装了ajax请求，有单独api模块，如果token过期，从新刷新token，继续之前的请求，但继续之前的请求，拿不到接口的返回值；如何解决。求大神

`import {domain} from './config'
let isRefreshing = true
let refreshLoginUrls = []
const wxRequest = (params = {}, url) => {
let token = dd.getStorageSync({key: 'token'}) ? 'Bearer ' + dd.getStorageSync({key: 'token'}).data : ''
let data = params.query || {}
return new Promise(async (resolve, reject) => {
await dd.httpRequest({
url: domain + url,
method: params.method || 'GET',
data: JSON.stringify(data),
headers: {
"Content-Type": "application/json",
Authorization: token
},
dataType: 'json',
success:async sucInfo => {
if (sucInfo.data && sucInfo.data.resultCode == 401) {
refreshLoginUrls.push({params: params, url:url})
if (isRefreshing) {
isRefreshing = false
await refreshToken()
}
return resolve(sucInfo.data)
} else {
return resolve(sucInfo.data)
}
},
fail: failInfo => {
return reject(failInfo)
},
})
})
}
const refreshToken = () => {
return new Promise((resolve, reject) => {
dd.getAuthCode({
success: loginCode => {
if (loginCode.authCode) {
wxPost({query: {code: loginCode.authCode}}, '/api/frontend/login').then(loginInfo => {
if (loginInfo.resultCode == 200) {
dd.setStorage({
key: "token",
data: loginInfo.data.access_token,
success: () => {
dd.setStorageSync({key: 'userInfo', data:loginInfo.data.user_info })
refreshLoginUrls.forEach(item => {
wxPost(item.params, item.url).then(res => {
return resolve(res.data)
})
})
refreshLoginUrls = []
}
})
} else {
return reject(loginInfo.data)
}
})
}
}
})
})
}
const wxGet = async (params = {}, url) => {
params.method = 'GET'
return wxRequest(params, url)
}
const wxPost = async (params = {}, url) => {
params.method = 'POST'
return wxRequest(params, url)
}
module.exports = {
wxRequest, wxGet, wxPost}``

回答

我项目里面刷新token是这样处理的，你看看这样能解决你的问题吗？

const createAxiosResponseInterceptor = () => {
  const axiosResponseInterceptor = axiosInstance.interceptors.response.use(
    (response) => {
      if (response.status >= 200 && response.status < 300) {
        if (response.data.code == 0) {
          return response.data.data;
        } else {
          throw new Error(response.data.msg);
        }
      }
      throw new Error("服务器正在维护中...");
    },
    async (error) => {
      console.error(error);
      if (!error || !error.response) {
        return Promise.reject(new Error("网络连接超时"));
      }
      let errorResponse = error.response;
      if (errorResponse.status === 401) {
        axiosInstance.interceptors.response.eject(axiosResponseInterceptor);
        // 重点代码在这里
        try {
          const response = await refreshToken();
          saveToken(response.data);
          errorResponse.config.headers["authorization"] =
            "Bearer " + response.data.access_token;
          return axiosInstance(errorResponse.config);
        } catch (error) {
          cleanToken();
          window.location.href =
            window.location.origin + "/index.html#/user/login";
          window.location.search = `?vwind=${Date.now()}`;
          return Promise.reject(new Error("登录失效,请重新登录"));
        } finally {
          createAxiosResponseInterceptor();
        }
      } else if (errorResponse.status === 500) {
        axiosInstance.interceptors.response.eject(axiosResponseInterceptor);
        try {
          const msg = errorResponse.data.msg;
          return Promise.reject(new Error(msg));
        } catch (error) {
          return Promise.reject(error);
        } finally {
          createAxiosResponseInterceptor();
        }
      } else {
        return Promise.reject(error);
      }
    }
  );
};createAxiosResponseInterceptor();