Vue配置拦截器

配置Vue环境为：

Vue：2.5.2，iview：3.2.2

框架：为新版项目PC端框架，与之前的Vue2示例框架冲突

新版项目PC端参考地址：git@IP:integral/frontend/integral-frontend-pc2.1.git

原因在于前端调用后端接口时，每个接口都会携带token。前端因为要调用很多后端接口，调用一次都要用一次token，这样就要造成编写重复的代码，导致代码冗余，也浪费了开发时间。而配置好拦截器便可以轻松的解决这个问题。

第一步：

1）.在src目录下创建axios文件夹，并且文件夹下创建index.js文件

2）.index.js文件中的代码内容：

import Vue from 'vue'
import axios from 'axios'
// import router from '../router'

const instance = axios.create({
  baseURL: 'http://192.168.22.126',
  // 超时时间
  timeout: 5000
})

Vue.prototype.$axios = axios
// axios.defaults.baseURL = baseUrl

// http请求
// axios request 拦截器
axios.interceptors.request.use(
  config => {
    // 下面会说在什么时候存储 token，判断是否已经携带了token信息
    if (localStorage.getItem('token')) {
      config.headers['Authorization'] = localStorage.getItem('token')
      config.headers['Content-Type'] = 'application/json'
      var companyId = localStorage.getItem('schoolNo') + 'BnaL7HrFBqYVsLude4MNVd'
      config.headers['companyId'] = companyId
    }
    return config
  },
  err => {
    return Promise.reject(err)
  }
)

// axios response 拦截器
axios.interceptors.response.use(
  response => {
    // 判断一下响应中是否有token，如果有就直接使用此token替换掉本地的token
    var token = response.headers.Authorization
    if (token) {
      // 如果header中存在token，那么触发refreshToken方法，替换本地的token
      axios.defaults.headers.common['Authorization'] = token
    }
    return response
  },
  error => {
    return Promise.reject(error)
    // 这里可以根据业务需要，填写返回的错误码
  }
)

Vue.http = Vue.prototype.$http = instance
export default axios

第二步：在main.js文件中引入axios，导入拦截器

代码内容：

import axios from './axios' // 导入拦截器 axios封装

Vue.prototype.$axios = axios

配置完成，成功运行。

如果本篇博客对您有一定的帮助，大家记得留言+点赞+收藏哦。