浅谈Vue网络请求之interceptors实际应用


Posted in Javascript onFebruary 28, 2018

项目背景

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

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

需求分析

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

功能实现

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

安装axios, 这里我们就赘述怎么安装axios.

在 main.js 注册 axios

Vue.use(Vuex)
Vue.use(VueAxios, axios)
Vue.use(qs)

注:qs,使用axios,必须得安装 qs,所有的Post 请求,我们都需要 qs,对参数进行序列化。

在 request 拦截器实现

axios.interceptors.request.use(
 config => {
  config.baseURL = '/api/'
  config.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题
  config.timeout = 2500
  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)
 }
)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一些常用的Javascript函数
Dec 22 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
巧用weui.topTips验证数据的实例
Apr 17 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
Node.js中DNS模块学习总结
Feb 28 #Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 #Javascript
如何在vue中使用ts的示例代码
Feb 28 #Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 #Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 #Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 #Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 #Javascript
You might like
PHP的ASP防火墙
2006/10/09 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
js中有关IE版本检测
2012/01/04 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
Python删除空文件和空文件夹的方法
2015/07/14 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
详解【python】str与json类型转换
2019/04/29 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
Python安装whl文件过程图解
2020/02/18 Python
详细分析Python垃圾回收机制
2020/07/01 Python
美国在线印刷公司:PsPrint
2017/10/12 全球购物
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
运动会100米解说词
2014/01/23 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
房屋租房协议书范本
2014/12/04 职场文书
消夏晚会主持词
2015/06/30 职场文书
教师节祝酒词
2015/08/11 职场文书
Python OpenCV之常用滤波器使用详解
2022/04/07 Python