vue-axios interceptors(拦截器)实际应用

最近在项目开发中,遇到下面这样一个问题:

在进行敏感操作之前,每个请求需要携带token,但是token 有有效期,token 失效后需要换取新的token并继续请求。
需求分析:

每个请求都需要携带 token ,所以我们可以使用 axios request 拦截器,在这里,我们给每个请求都加 token,这样就可以节省每个请求再一次次的复制粘贴代码。
token 失效问题,当我们token 失效,我们服务端会返回一个特定的错误表示,比如 token invalid,但是我们不能在每个请求之后去做刷新 token 的操作呀,所以这里我们就用 axios response 拦截器,我们统一处理所有请求成功之后响应过来的数据,然后对特殊数据进行处理,其他的正常分发。
功能实现

分析完问题后,我们来实现功能

安装axios :npm i axios

在 main.js 注册 axios

Vue.use(Vuex)
Vue.use(VueAxios, axios)
Vue.use(qs)
注:qs,。

在 request 拦截器实现

axios.interceptors.request.use(
 config => {
  config.baseURL = '/api/'
  config.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题
  config.timeout = 6000
  let token = sessionStorage.getItem('access_token')
  let csrf = store.getters.csrf
  if (token) {
   config.headers = {
    'access-token': token,
    'Content-Type': 'application/x-www-form-urlencoded'
   }
  }
  if (config.url === 'refresh') {
   config.headers = {
    'refresh-token': sessionStorage.getItem('refresh_token'),
    'Content-Type': 'application/x-www-form-urlencoded'
   }
  }
  return config
 },
 error => {
  return Promise.reject(error)
 }
)
//在 response 拦截器实现

axios.interceptors.response.use(
 response => {
  // 定时刷新access-token
  if (!response.data.value && response.data.data.message === 'token invalid') {
   // 刷新token
   store.dispatch('refresh').then(response => {
    sessionStorage.setItem('access_token', response.data)
   }).catch(error => {
    throw new Error('token刷新' + error)
   })
  }
  return response
 },
 error => {
  return Promise.reject(error)
 }
)

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 103,703评论 13 125
  • 时间2017-03-31 13:43:44Hope’s Blog 原文https://blog.ygxdxx.co...
    萧玄辞阅读 8,479评论 3 16
  • axios 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用 功能特性 在...
    jslxm阅读 2,838评论 0 1
  • 很久没有写过小说,没写作,更多的应该准确的说只是流水账般的日记,生活记录,因为有太多不能说的话,因为太多的话我还没...
    大彬哥666阅读 180评论 0 0
  • 三月在流逝 文/墨染 三月在喜 刻在嫩绿的新芽里 写在风吹牛羊的故事中 三月在笑 荡在湖水的清波里 闯进孩子们嬉戏...
    __墨染阅读 84评论 13 7