mpvue微信小程序的接口请求fly全局拦截代码实例


Posted in Javascript onNovember 13, 2019

这篇文章主要介绍了mpvue微信小程序的接口请求fly全局拦截代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

业务要求

需要进入页面时就要游客登陆拿到token;

之后的接口都是需要这个token;

其他操作则需要授权登陆,此时的token已失效;

token过久之后会过期;

业务实现:

1.全局拦截

fly.interceptors.request.use(request => {


const token = storage.get('jwt')


// 给所有请求添加自定义header


if (!jwt) {



fly.lock() // 进入接口后没有token的需要锁住请求



return store.dispatch('visitorLoginFun').then(res => { // 这里需要一个新的拦截器




if (res) {





const token = storage.get('token')





request.headers['Authorization'] = 'Bearer ' + token // 为队列里的接口加token





return request





}




}).finally(() => {





fly.unlock()




})



} else {




request.headers['Accept'] =




'application/json,text/html;q=0.9,image/webp,*/*;q=0.8'




request.headers['Content-Type'] = 'application/json;charset=UTF-8'




request.headers['Authorization'] = 'Bearer ' + token




request.headers['client'] = client




request.headers['version'] = version




wx.showNavigationBarLoading()




return request



}


})

2.返回拦截

fly.interceptors.response.use(



(response, promise) => {




if (response.data.code === 1001) {





mpvue.navigateTo({url: '../accredit/main'}) // 返回提示需要登陆需要跳转授权登陆页 或者弹窗 授权只能通过按钮触发




}




if (response.data.code === 1002) {





fly.lock() //token过期 锁住拦截器





return store.dispatch('accreditLogin').then(res => { // 使用新起的拦截器发送登陆接口





}).finally(() => fly.unlock()).then(() => {






return fly.request(response.request) // 返回上一个请求





})




 }




return promise.resolve(obj)



}


}

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

Javascript 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
javascript解决IE6下hover问题的方法
Jul 28 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
javascript操作元素的常见方法小结
Nov 13 #Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 #Javascript
vue项目中锚点定位替代方式
Nov 13 #Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 #Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 #jQuery
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 #Javascript
jquery获取input输入框中的值
Nov 13 #jQuery
You might like
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
php生成curl命令行的方法
2015/12/14 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
js获取域名的方法
2015/01/27 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
jquery实现拖动效果
2016/08/10 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
Python之re操作方法(详解)
2017/06/14 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
使用python3实现操作串口详解
2019/01/01 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
详解Python是如何实现issubclass的
2019/07/24 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
python实现UDP协议下的文件传输
2020/03/20 Python
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
送给他或她的礼物:FUN.com
2018/08/17 全球购物
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
护理个人求职信范文
2014/01/08 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
获奖感言范文
2015/07/31 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
Nginx动静分离配置实现与说明
2022/04/07 Servers