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 相关文章推荐
详细解密jsonp跨域请求
Apr 15 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
实用的Vue开发技巧
May 30 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
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 OPCode缓存 APC详细介绍
2010/10/12 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
深入php内核之php in array
2015/11/10 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
laravel自定义分页效果
2017/07/23 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
关于js遍历表格的实例
2013/07/10 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
Python生成随机数组的方法小结
2017/04/15 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
Selenium的使用详解
2018/10/19 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
HTML5 weui使用笔记
2019/11/21 HTML / CSS
如何现实servlet的单线程模式
2014/08/05 面试题
大学生农村教师实习自我鉴定
2013/09/21 职场文书
总经理岗位职责
2013/11/09 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
对标管理实施方案
2014/03/12 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
经营场所证明范本
2015/06/19 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
MySQL系列之十一 日志记录
2021/07/02 MySQL