vue一般都搭配axios这个工具来做http请求，有时我们需要配置一些全局参数，比如token啦，设置超时时间啦，未登录状态踢出啦等等。
这些参数的设置，当然不可能一个一个请求加了，否则累的吐血也不一定能达到目的，最好的办法就是通过拦截器让每个请求都可以加上配置参数。
import axios from ‘axios‘ axios.defaults.timeout = 10000 // 超时时间 let VueCookie = require(‘vue-cookie‘) let cookieVue = VueCookie.get(‘x_auth_token‘) // 获取cookie axios.interceptors.request.use( config => { config.headers[‘X-Auth-Token‘] = cookieVue //cookie设置在头部信息里面 config.headers[‘Content-Type‘] = ‘application/json‘ return config }, error => { alert(‘请求超时，请稍后重试！‘) return Promise.reject(error) } ) // http响应拦截器 axios.interceptors.response.use(res => { if (res.data.bodyObj && res.data.bodyObj.code) { let code = res.data.bodyObj.code // 10101是未登录状态码 if (code === 10101) { // 如果是未登录直接踢出去 location.href = ‘/login.html‘ } } return res }, error => { alert(‘请求失败，请稍后重试！‘) return Promise.reject(error) } ) export default axios
项目中通常使用token进行用户权限认证，需要在请求的header中添加token信息进行验证，拦截返回的状态码进行跳转或重新登陆，在全局配置这些不妥，所以新建一个axios实例进行项目的配置。
// util.js import axios from ‘axios‘ import cookies from ‘vue-cookies‘ import router from ‘vue-router‘ export const $axios = axios.create({ // 这里是配置项 timeout: 7000, }) // 拦截请求 $axios.interceptors.request.use( config => { console.log(config); let t = cookies.get(‘t‘) if (t) { config.headers.t = t } else { router.replace({path: ‘/login‘}) } return config }, err => { return Promise.reject(err) } ) // 拦截响应 $axios.interceptors.response.use( response => { console.log(response) return response }, err => { console.log(err); if (err.response) { switch (err.response.status) { case 401: // 这里写清除token的代码 router.replace({ path: ‘login‘, query: {redirect: router.currentRoute.fullPath} // 登录成功后跳入浏览的当前页面 }) } } return Promise.reject(err) } ) ———————————————— 原文链接：https://blog.csdn.net/qq_39081974/article/details/81940300