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 性能优化指南(3)
May 21 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
浅谈Vue.use的使用
Aug 29 Javascript
解决vue props 拿不到值的问题
Sep 11 Javascript
详解webpack2异步加载套路
Sep 14 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
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
jquery 可排列的表实现代码
2009/11/13 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
Python生成器(Generator)详解
2015/04/13 Python
python中异常捕获方法详解
2017/03/03 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
pytorch数据预处理错误的解决
2020/02/20 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
怎样写留学自荐信
2013/11/11 职场文书
导游个人求职信
2014/04/25 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
老公婚前保证书
2015/02/28 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
使用CSS设置滚动条样式
2022/01/18 HTML / CSS