axios因token过期导致弹出多条信息提示，简单处理解决！

最新推荐文章于 2024-09-09 15:01:35 发布

前端攻城狮路飞

最新推荐文章于 2024-09-09 15:01:35 发布

阅读量3.6k

点赞数 10

分类专栏： Axios 文章标签：前端 vue.js javascript http web

本文链接：https://blog.csdn.net/m0_46156566/article/details/113976916

版权

Axios 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

首先看一下问题，我们在某个页面同时发起三条请求，token过期导致请求失败，返回登录页后一下弹出三个信息提示，体验感不太好

在这里插入图片描述

我们只希望他弹出一条提示，解决办法也很简单，在我们封装请求的js文件中加一个判断即可，先声明一个变量showMsg来控制是否需要弹框，初始化为true,然后在请求判断中如果token失效导致走了401，先判断当前是否可以显示弹框，初始化为true第一次可以显示，然后把showMsg变为false,当地二第三请求走到这里的时候，showMsg为false，就不会再继续弹框了，第一次弹框后记得再加上一个定时器，两三秒后把showMsg重置为true，防止下一次token失效后不弹框

import {
  Message
} from "element-ui";
let showMsg = true;
// 响应处理
let handlerResponse = (resCode, resDataTemp, method, url, data, otherRequestParams) => {
  return new Promise((resolve, reject) => {
    if (resCode === 401 && resDataTemp === '用户无权访问！') {
      Message.error('你无权限访问当前应用！');
      router.push({ path: '/home' });
      return reject('你无权限访问当前应用!');
    }
    if (resCode === 1022 && typeof resDataTemp === 'object' &&
      resDataTemp.message === 'no manager authority') {
      Message.error('你无权限访问当前应用！');
      router.push({ path: '/home' });
      return reject('你无权限访问当前应用!');
    }
    switch (Number(resCode)) {
      case 0:
        resolve(null);
        break;
      case 200:
        resolve(null); 
        break;
      case 401:
        if(showMsg) {
          Message.error('用户尚未登录！');
          showMsg = false
          setTimeout(() => {
            showMsg = true;
          }, 3000);
        }
        router.push({ path: '/login' });
        reject('用户尚未登录');
        break;
      case 1000:
      case 1022:
        Message.error('尚未注册！');
        router.push({ path: '/login' });
        reject('尚未注册');
        break;
      default:
        if (typeof resDataTemp === 'object' && resDataTemp.message) {
          return reject(resDataTemp.message);
        } else {
          return reject('未知错误！code:' + resCode);
        }
    }
  });
}