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 相关文章推荐
javascript 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
javaScript函数中执行C#代码中的函数方法总结
Aug 07 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
js sort 二维数组排序的用法小结
Jan 24 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
php结合js实现多条件组合查询
May 28 Javascript
微信小程序基础教程之echart的使用
Jun 01 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结合ACCESS的跨库查询功能
2015/06/12 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
Vue $attrs & inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
Python中使用动态变量名的方法
2014/05/06 Python
详细探究Python中的字典容器
2015/04/14 Python
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
Fabric 应用案例
2016/08/28 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
Python flask框架端口失效解决方案
2020/06/04 Python
计算s=f(f(-1.4))的值
2014/05/06 面试题
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
销售文员岗位职责
2013/11/29 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
离职信范本
2015/06/23 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
MySQL 计算连续登录天数
2022/05/11 MySQL
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers