vue2-封装axios请求并设置请求拦截器

Posted 2022-03-08 尔嵘

在vue2的管理系统平台中，我们会遇到，如果是登陆之后，用户长期不操作，但是我们要提示用户登录已过期请重新登录之类的操作，页面重定向。

一般我们接口请求中都会一个token，这个token是在登陆成功之后，后端给你请求接口鉴权使用的，但是token是有服务期限的，即token超时后会失效，这个失效时间需要后端设置的，当然前端可以跟他商量一下。下面是全部代码，既有axios请求封装，又有拦截器，请看以下request.js：

import axios from \'axios\'
// import Message from \'element-ui\';
import Cookies from \'js-cookie\'
import router from \'@/router\'
import qs from \'qs\'
import store from \'@/store\'
import  clearLoginInfo  from \'@/utils\'
import isPlainObject from \'lodash/isPlainObject\'

let cancelTokenArr = [] //储存cancel token
// request拦截器
const http = axios.create(
    baseURL: window.SITE_CONFIG[\'apiURL\'],
    timeout: 1000 * 180,
    withCredentials: true
)

/**
 * 请求拦截
 */
http.interceptors.request.use(config => 
    config.headers[