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 相关文章推荐
js资料toString 方法
Mar 13 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
Feb 03 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
ES6数组的扩展详解
Apr 25 Javascript
webpack4+react多页面架构的实现
Oct 25 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 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入门小知识
2008/03/24 PHP
PHP 网页过期时间的控制代码
2009/06/29 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
在Python中编写数据库模块的教程
2015/04/29 Python
Python中的hypot()方法使用简介
2015/05/18 Python
深入理解Python中字典的键的使用
2015/08/19 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
大学生社会实践感想
2015/08/11 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers