vue+elementUI 路由拦截提示

接口过期,响应超时界面提示:

request.ts:

import axios from "axios";
import ElementUI from "element-ui";
import Vue from "vue";
import { ticket } from "@/api";
const service = axios.create({
  // baseURL: 'process.env.VUE_APP_BASE_API', // url = base url + request url
  baseURL: "", // url = base url + request url
  timeout: 2000
  // withCredentials: true // send cookies when cross-domain requests
});

// Request interceptors
service.interceptors.request.use(
  (config: any) => {
    return config;
  },
  error => {
    console.log(error);
    Promise.reject(error);
  }
);

// Response interceptors
service.interceptors.response.use(
  response => {
    // console.log(response)
    // Some example codes here:
    // code == 20000: success
    // code == 50001: invalid access token
    // code == 50002: already login in other place
    // code == 50003: access token expired
    // code == 50004: invalid user (user not exist)
    // code == 50005: username or password is incorrect
    // You can change this part for your own usage.
    const res = response;
    if (response.status == 401) {
        ElementUI.MessageBox.confirm("会话过期,请重新登录", "提示", {
          confirmButtonText: "确定",
          showCancelButton:false,
          type: "warning"
          }).then(() => {
              ticket.end();
              localStorage.clear();
              window.location.href = window.location.origin;
          }).catch(() => {});
      
    } else {
      return response;
    }
  },
  error => {
    if(error.response){
        if (error.response.status == 401) {
          ElementUI.MessageBox.confirm("会话过期,请重新登录", "提示", {
            confirmButtonText: "确定",
            showCancelButton:false,
            type: "warning"
            }).then(() => {
                ticket.end();
                localStorage.clear();
                window.location.href = window.location.origin;
            }).catch(() => {});
         }
    }else{
      ElementUI.MessageBox.confirm("请求超时,请检查网络", "提示", {
        confirmButtonText: "确定",
        showCancelButton:false,
        type: "warning"
        }).then(() => {
            ticket.end();
            localStorage.clear();
            window.location.href = window.location.origin;
        }).catch(() => {});
    }
    
  }
);

export default service;

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值