axios因token过期导致弹出多条信息提示的简单解决方法

阅读数:152 评论数:0

跳转到新版页面

分类

html/css/js

正文

在我们封装请求的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);
        }
    }
  });
}



相关推荐

一、使用vue-cli新建工程 vue create demo1 然后用vsco

一、使用pnpm新建项目 可以使用npm 或yarn或pnpm来初始化Vite项目 pnpm create vite xxx(项目名称) #选择vue #选择js cd xxx (进入项目目录) #安

1、(前端)跨域请求是携带Cookie ,需要配置axios.defaults.withCredentials = true;2、(后端)响应需要携带响应头 Access-Control-Allow-

一、概述 NUXT 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染(SSR)应用,也可充当静态站点引擎生成静态站点应用。服务端渲染又称 SSR (Server Side Render