axios 拦截器处理request和response

437 阅读1分钟

问题:初期沟通有问题,项目在开发中开发人员各自封装 axios(4 种),而且有的开发人员在自己封装的 axios 中做了数据处理中,现在要做 token 失效后跳转登录页面。

方案设想:统一所有人的 axios,但是由于开发人员在自己 axios 中做了大量的业务处理,所有改起来成本比较大,而且需要重现测试,所有暂时无法做到统一。

确定方案:利用 axios 的拦截器功能可以统一对 request 和 response 做处理。

这里简单介绍下 axios 对响应 response 处理的用法,我的想法是在主文件(app.js/main.js)中利用 axiox 的拦截器功能进行判断处理是否跳转登录。

// 添加响应拦截器
//防止 401 接口循环调用(公司 401 代表未登录或者 token 失效)
let isLogout = false;
axios.interceptors.response.use(function (response) {

    if (response?.data?.state == 401) {
      //由于 登录和应用不在一个项目 所以本地开发 不做退出登录操作

      if (!isLogout) {
        isLogout = true;
        logoutClear()// 清除缓存、token 等和登录有关数据
        handleLogin();//跳转到指定页面(登录页面)
        setTimeout(() => {
          // 避免重复跳转指定页面 等待 2 秒 让其他接口执行完毕
          isLogout = false;
        }, 2 * 1000);
      }

    } else return response;

}, function (error) {
// 对响应错误数据处理
return Promise.reject(error);
});