浅谈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 相关文章推荐
Opacity.js
Jan 22 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
第九章之路径分页标签与徽章组件
Apr 25 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
从vue源码看props的用法
Jan 09 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
React实现评论的添加和删除
Oct 20 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+JS+rsa数据加密传输实现代码
2011/03/23 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
图片之间的切换
2006/06/26 Javascript
JavaScript File分段上传
2016/03/10 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
js实现右键菜单功能
2016/11/28 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
最新计算机专业自荐信
2013/10/16 职场文书
校园安全教育广播稿
2014/02/17 职场文书
鉴定评语大全
2014/05/05 职场文书
文明班级申报材料
2014/12/24 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
认识实习感想
2015/08/10 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS