首页 > 移动平台 > 详细

axios拦截器

时间:2020-05-14 21:59:03      阅读:81      评论:0      收藏:0      [点我收藏+]

前言

  • 在前端开发时需要在所有的请求上添加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。

axios拦截器

原文:https://www.cnblogs.com/Kali-Team/p/12891109.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!