axios拦截器

前言

• 在前端开发时需要在所有的请求上添加Token，rpc的版本和id，在每一个请求的头部添加太麻烦了，看到源码里有axios的拦截器，刚好可以实现我想要的功能，这里记录一下。

axios拦截器

• 我使用的vue-admin-template作为开发模板，所有拦截器的文件路径在src/utils/request.js

• 拦截器分为两种，一种是请求拦截，一个是响应拦截。就是一个在发送请求前对请求头或者数据进行处理，一个是在你收到服务器返回的数据在响应拦截器做了某些操作再返回给用户。

请求拦截器

service.interceptors.request.use(
  config => {
    if (config.method === 'post') {
      config.data = Object.assign({}, config.data, { jsonrpc: '2.0', id: 0 })
    }
    // do something before request is sent

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['Authorization'] = 'Bearer ' + getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

• 上面的是请求拦截器，在这我先判断请求方法是否为post请求，如果是就向数据插入rpc的版本和id。
• 最后判断store中是否存在token，如果存在则在请求头中带上token。