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 相关文章推荐
页面中iframe相互传值传参
Dec 13 Javascript
jquery 应用代码 方便的排序功能
Feb 06 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
js操作iframe父子窗体示例
May 22 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 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 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
jquery UI 1.72 之datepicker
2009/12/29 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
JS获取当前地理位置的方法
2017/10/25 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
python进阶教程之动态类型详解
2014/08/30 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
numpy中的高维数组转置实例
2018/04/17 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
全球游戏Keys和卡片市场:GamesDeal
2018/03/28 全球购物
平面设计自荐信
2013/10/07 职场文书
热能动力工程毕业生自荐信
2013/11/07 职场文书
英文自荐信
2013/12/19 职场文书
后进生转化工作制度
2014/01/17 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
情人节活动策划方案
2014/02/27 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
班委竞选稿范文
2015/11/21 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
Django路由层如何获取正确的url
2021/07/15 Python