vue添加全局拦截器

为了统一处理错误及配置请求信息可以设置拦截器，本文是登录过期设置，过期后跳到登录页

1. 安装 axios , 命令： npm install axios --save-dev
2. 在src目录的新建config文件夹，并在config目录下新建文件 axiosConfig.js ，内容如下

import axios from 'axios'
import { Message } from 'element-ui'//引用elementui的信息提示框，根据个人选择可以不用
import Router from '../router'

// Add a request interceptor
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config
}, function (error) {
// Do something with request error
Message.error({
message: '请求错误：' + error.message
})
return Promise.reject(error)
})

// Add a response interceptor
axios.interceptors.response.use(function (response) {
// console.log('response')
// Do something with response data
// console.log(response)
//返回参数是noLogin时，返回首页
if (response.data.flag === 'noLogin') {
Router.push('/')
Message.error({
message: '当前会话过期'
})
}
return response
}, function (error) {
// Do something with response error
let msg = error.message
if (error.response.status === 401) {
msg = '当前会话已过期。'
Router.push('/')
}
Message.error({
message: '响应错误：' + msg
})
return Promise.reject(error)
})
export default axios

3、 在main.js中进行引用，并配置一个别名来进行调用

import Axios from '@/config/axiosConfig'

Vue.prototype.$http = Axios

4、post请求格式

this.$http.post(url).then(res=>{
    console.log(res)
    }).catch(res=>{
 console.log(res)
})