vue+elementUI 路由拦截提示

最新推荐文章于 2024-04-03 16:07:36 发布

dft_66

最新推荐文章于 2024-04-03 16:07:36 发布

阅读量558

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/dft_66/article/details/117560425

本文介绍了如何在Vue项目中使用axios进行接口请求时处理过期响应和超时问题，包括错误提示及登出重定向机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接口过期，响应超时界面提示：

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;