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 相关文章推荐
JavaScript入门教程 Cookies
Jan 31 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
Jul 03 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
微信小程序定位当前城市的方法
Jul 19 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery实现视频展示效果
May 30 jQuery
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 飞信好友免费短信API接口开源版
2010/07/22 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
动态添加js事件实现代码
2009/03/12 Javascript
JS 控制非法字符的输入代码
2009/12/04 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
新手该如何学python怎么学好python?
2008/10/07 Python
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
在校生钳工实习自我鉴定
2013/09/19 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
《长相思》听课反思
2014/04/10 职场文书
小学生爱国演讲稿
2014/04/25 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
师德师风自我评价范文
2014/09/11 职场文书
2014年秘书工作总结
2014/11/25 职场文书
转让协议书
2015/01/27 职场文书
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang