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 相关文章推荐
js 表格隔行颜色
Dec 02 Javascript
JQuery与iframe交互实现代码
Dec 24 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
Angular Renderer (渲染器)的具体使用
May 03 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 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获取网站域名和地址的代码
2008/08/17 PHP
php 中文处理函数集合
2008/08/27 PHP
php数据访问之查询关键字
2016/05/09 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
详解node.js 事件循环
2020/07/22 Javascript
python多线程编程方式分析示例详解
2013/12/06 Python
python通过post提交数据的方法
2015/05/06 Python
Python编程之序列操作实例详解
2017/07/22 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
Python 下载及安装详细步骤
2019/11/04 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
两只小狮子教学反思
2014/02/05 职场文书
工作表现自我评价
2014/02/08 职场文书
商品陈列协议书
2014/09/29 职场文书
财务整改报告范文
2014/11/05 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
优秀党员先进材料
2014/12/18 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL