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特效 幻灯片效果示例代码
Jul 16 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
关于使用js算总价的问题
Jun 23 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
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格式化工具Beautify PHP小小BUG
2008/04/24 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
Destoon模板制作简明教程
2014/06/20 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
文本加密解密
2006/06/23 Javascript
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
JavaScript 程序编码规范
2010/11/23 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
Python实现Kmeans聚类算法
2020/06/10 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
python 公共方法汇总解析
2019/09/16 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
一套C++笔试题面试题
2012/06/06 面试题
资深财务管理人员自我评价
2013/09/22 职场文书
电气自动化大学生求职信
2013/10/16 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
世界读书日的活动方案
2014/08/20 职场文书
财务务虚会发言材料
2014/10/20 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang