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 相关文章推荐
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
JS中的算法与数据结构之列表(List)实例详解
Aug 16 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 Javascript
深入理解redux之compose的具体应用
Jan 12 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 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数据库抽象层 PDO
2011/05/07 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
学习React中ref的两个demo示例
2018/08/14 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
自我鉴定思想方面
2013/10/07 职场文书
前台文员岗位职责
2013/12/28 职场文书
三下乡活动方案
2014/01/31 职场文书
大学活动总结范文
2014/04/29 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
职工培训工作总结
2015/08/10 职场文书
导游词之江西赣州
2019/10/15 职场文书
Python入门学习之类的相关知识总结
2021/05/25 Python
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python