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 相关文章推荐
json的前台操作和后台操作实现代码
Jan 20 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
element-ui 关于获取select 的label值方法
Aug 24 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 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
ThinkPHP的L方法使用简介
2014/06/18 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
分享PHP守护进程类
2015/12/30 PHP
如何实现JS函数的重载
2006/09/22 Javascript
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
Python绘制正余弦函数图像的方法
2018/08/28 Python
Python多进程fork()函数详解
2019/02/22 Python
python之yield和Generator深入解析
2019/09/18 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
python如何查看网页代码
2020/06/07 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
大三预备党员入党思想汇报
2014/01/08 职场文书
教师评优事迹材料
2014/01/10 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
新春寄语大全
2014/04/09 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫