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 相关文章推荐
关于Mozilla浏览器不支持innerText的解决办法
Jan 01 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
javascript里使用php代码实例
Dec 13 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
小程序选项卡以及swiper套用(跨页面)
Jun 19 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数组中的重复值的实现代码
2011/07/17 PHP
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
基于jquery的tab切换 js原理
2010/04/01 Javascript
offsetParent 算法分析
2010/04/05 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
js随机生成一个验证码
2017/06/01 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
vue点击自增和求和的实例代码
2019/11/06 Javascript
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
Python中super函数的用法
2017/11/17 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
毕业证丢失证明
2014/01/15 职场文书
运动会宣传口号
2014/06/09 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
致运动员加油稿
2015/07/21 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
MySQL深分页问题解决思路
2022/12/24 MySQL