vue中使用请求拦截器和响应拦截器

在使用一些前后端会话时，需要在请求头中携带一些特殊请求头，这样，就需要设置请求拦截器和响应拦截器

我在开发项目时，由于后端使用了token令牌，登录后在前端保存，然后每次请求都要携带token，将这些配置写在main.js文件中是很乱的不易于阅读，我额外配置了axios请求配置模块 这样在以后对于请求响应都能更好的配置而不会影响其他配置

在common文件中创建 一个文件
文件内容为（这里必须export这个配置后，才能被）：

import axios from 'axios'
//这里配置了请求URL和响应超时时间
axios.defaults.baseURL = 'http://127.0.0.1:3000'
axios.defaults.timeout = 30 * 1000


// 请求拦截器，在请求头里添加TOKEN
axios.interceptors.request.use(config => {
  const token = window.sessionStorage.getItem('token')
  config.headers.Authorization = token
  return config
})

//响应拦截器  对于响应过滤
axios.interceptors.response.use(
  response => {
    if (response.data.status === 100001) {
      window.location.href = '/'
    }
    return response
  }
)

export default axios

然后在mian.js中引入

import axios from './commons/reqrestoken'

这样就可以对所有的请求都携带token了