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 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
Mar 06 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
react 组件传值的三种方法
Jun 03 Javascript
微信小程序实现下拉加载更多商品
Dec 29 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+mysql写的简单留言本实例代码
2008/07/25 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
js中string转int把String类型转化成int类型
2014/08/13 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
浅析JS运动
2015/12/28 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
jQuery表单验证之密码确认
2017/05/22 jQuery
node跨域请求方法小结
2017/08/25 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
跟老齐学Python之折腾一下目录
2014/10/24 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
python3中函数参数的四种简单用法
2018/07/09 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
Python内置加密模块用法解析
2019/11/25 Python
HTML5的革新 结构之美
2011/06/20 HTML / CSS
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
酒店服务与管理毕业生求职信
2013/11/02 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
邀请函怎么写
2015/01/30 职场文书
信访维稳承诺书
2015/05/04 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis