axios 添加拦截器，配置请求头，添加 token 验证
一. 配置 axios1. static 文件夹中创建一个 api 文件夹，api 文件中创建一个 http.js 文件2. 配置 http.js 文件3. main.js 中引入 http.js 文件 二. 组件中发送接口请求时，会发现报跨域错误1. 配置 config 文件夹中的 index.js 文件2. 修改 http.js 文件中的 默认接口3. 修改之后的 http.js4. npm run dev重启项目，发现接口正常请求。 三. 总结 axios 拦截器（请求和响应）一. 配置 axios
1. static 文件夹中创建一个 api 文件夹，api 文件中创建一个 http.js 文件
2. 配置 http.js 文件
import Vue from 'vue'import axios from 'axios'import ElementUI from 'element-ui';import router from '../../src/router'// 配置请求默认接口axios.defaults.baseURL = "http://xxxx:8080"// 设置请求超时时间// axios.defaults.timeout = 15000 // 是否允许跨域携带cookie信息axios.defaults.withCredentials = false;// 配置请求头axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';// http request 拦截器 添加一个请求拦截器axios.interceptors.request.use((config) => {// config 是 axios 配置对象// 获取tokenlet token = window.localStorage.getItem('token');// 添加tokentoken && (config.headers.token = token)return config;}, (error) => {// 请求出错return Promise.reject(error);});// http response 拦截器 添加一个响应拦截器axios.interceptors.response.use((response) => {// 响应成功，根据后台返回数据统一处理错误码switch (response.data.code) {case 5005:// 提示内容及操作ElementUI.Message({message: "登录超时，请重新登录验证！",type: 'warning'});router.push('/login')break;case 401:// 提示内容及操作break;// 更多状态提示...}return response;}, (error) => {// 响应失败return Promise.reject(error);})Vue.prototype.$axios = axios
3. main.js 中引入 http.js 文件
import '../static/api/http.js'
二. 组件中发送接口请求时，会发现报跨域错误
1. 配置 config 文件夹中的 index.js 文件
proxyTable: {'/api': {target: 'http://xxxx:8080',//设置调用的接口域名和端口号secure: false, // 如果是https接口，需要配置这个参数changeOrigin: true,pathRewrite: {'^/api': ''//将api 重写为空，这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://localhost:8080/user/login'，直接写‘/api/user/login’即可}}},
2. 修改 http.js 文件中的 默认接口
axios.defaults.baseURL = "/api"
3. 修改之后的 http.js
import Vue from 'vue'import axios from 'axios'import ElementUI from 'element-ui';import router from '../../src/router'// 配置请求默认接口axios.defaults.baseURL = "/api"// 设置请求超时时间// axios.defaults.timeout = 15000 // 是否允许跨域携带cookie信息axios.defaults.withCredentials = false;// 配置请求头axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';// http request 拦截器 添加一个请求拦截器axios.interceptors.request.use((config) => {// config 是 axios 配置对象// 获取tokenlet token = window.localStorage.getItem('token');// 添加tokentoken && (config.headers.token = token)return config;}, (error) => {// 请求出错return Promise.reject(error);});// http response 拦截器 添加一个响应拦截器axios.interceptors.response.use((response) => {// 响应成功，根据后台返回数据统一处理错误码switch (response.data.code) {case 5005:// 提示内容及操作ElementUI.Message({message: "登录超时，请重新登录验证！",type: 'warning'});router.push('/login')break;case 401:// 提示内容及操作break;// 更多状态提示...}return response;}, (error) => {// 响应失败return Promise.reject(error);})Vue.prototype.$axios = axios
4. npm run dev重启项目，发现接口正常请求。
三. 总结 axios 拦截器（请求和响应）
// 添加请求拦截器axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器axios.interceptors.response.use(function (response) {// 对响应数据做点什么return response;}, function (error) {// 对响应错误做点什么return Promise.reject(error);});
