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中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
基于vue.js实现购物车
Jan 15 Javascript
基于javascript实现日历功能原理及代码实例
May 07 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写UltraEdit插件脚本实现方法
2011/12/26 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
利用php输出不同的心形图案
2016/04/22 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
深入理解javascript中的this
2021/02/08 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
使用Python构建Hopfield网络的教程
2015/04/14 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
python实现日志按天分割
2019/07/22 Python
python打造爬虫代理池过程解析
2019/08/15 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
什么是python的必选参数
2020/06/21 Python
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
预备党员综合考察材料
2014/05/31 职场文书
高考励志标语
2014/06/05 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
商标侵权律师函
2015/05/27 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android