mpvue项目中基于flyio的拦截

2024-08-31 14:38
文章标签 拦截 项目 mpvue flyio

本文主要是介绍mpvue项目中基于flyio的拦截,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在请求拦截器中执行异步任务

下面我们看一个例子:由于安全原因,我们需要所有的请求都需要在header中设置一个csrfToken,如果csrfToken不存在时,我们需要先请求一个csrfToken,然后再发起网络请求,由于请求csrfToken是异步的,所以我们需要在拦截器中执行异步请求,代码如下:

不知道为什么 官方文档的tokenFly 和 newFly 不统一一下 其实就是一个东西 容易误导人

var csrfToken="";
var tokenFly=new Fly();
var fly=new Fly();
fly.interceptors.request.use(function (request) {log(`发起请求:path:${request.url},baseURL:${request.baseURL}`)if (!csrfToken) {log("没有token,先请求token...");//锁定当天实例,后续请求会在拦截器外排队,详情见后面文档fly.lock();return tokenFly.get("/token").then((d) => {request.headers["csrfToken"] = csrfToken = d.data.data.token;log("token请求成功,值为: " + d.data.data.token);log(`继续完成请求:path:${request.url},baseURL:${request.baseURL}`)return request; //只有最终返回request对象时,原来的请求才会继续}).finally(()=>{fly.unlock();//解锁后,会继续发起请求队列中的任务,详情见后面文档})} else {request.headers["csrfToken"] = csrfToken;}
})

本人在mpvue 写拦截器

login 

import Fly from 'flyio/dist/npm/wx'
import config from '../config'import {set, get} from '@/utils/storage'var fly = new Fly()
var tokenFly = new Fly()
var host = config.url
var token = get('token')
// token为空重新获取
function login () {return new Promise((resolve, reject) => {wx.login({success: function (res) {tokenFly.post('/xxx/xxxx', {js_code: res.code}).then(res => {console.log(res)set('token', res.data.stringData)resolve(res.data.stringData)})},fail: function (err) {reject(err)}})})
}
// 添加请求拦截器
fly.interceptors.request.use(function (request) {if (token === '') {fly.lock()return login().then((loginRes) => {console.log(loginRes)// 将header中的cookie置为新获取的cookierequest.headers['token'] = loginResreturn request}).finally(() => {// 解锁当前fly实例fly.unlock()})} else {request.headers['token'] = get('token')}
}

 

这篇关于mpvue项目中基于flyio的拦截的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1124185

相关文章

springboot项目中整合高德地图的实践

《springboot项目中整合高德地图的实践》:本文主要介绍springboot项目中整合高德地图的实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一:高德开放平台的使用二:创建数据库(我是用的是mysql)三:Springboot所需的依赖(根据你的需求再

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热

SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志

《SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志》在SpringBoot项目中,使用logback-spring.xml配置屏蔽特定路径的日志有两种常用方式,文中的... 目录方案一:基础配置(直接关闭目标路径日志)方案二:结合 Spring Profile 按环境屏蔽关

MySQL版本问题导致项目无法启动问题的解决方案

《MySQL版本问题导致项目无法启动问题的解决方案》本文记录了一次因MySQL版本不一致导致项目启动失败的经历,详细解析了连接错误的原因,并提供了两种解决方案:调整连接字符串禁用SSL或统一MySQL... 目录本地项目启动报错报错原因:解决方案第一个:第二种:容器启动mysql的坑两种修改时区的方法:本地

springboot项目中使用JOSN解析库的方法

《springboot项目中使用JOSN解析库的方法》JSON,全程是JavaScriptObjectNotation,是一种轻量级的数据交换格式,本文给大家介绍springboot项目中使用JOSN... 目录一、jsON解析简介二、Spring Boot项目中使用JSON解析1、pom.XML文件引入依

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

Maven项目中集成数据库文档生成工具的操作步骤

《Maven项目中集成数据库文档生成工具的操作步骤》在Maven项目中,可以通过集成数据库文档生成工具来自动生成数据库文档,本文为大家整理了使用screw-maven-plugin(推荐)的完... 目录1. 添加插件配置到 pom.XML2. 配置数据库信息3. 执行生成命令4. 高级配置选项5. 注意事

eclipse如何运行springboot项目

《eclipse如何运行springboot项目》:本文主要介绍eclipse如何运行springboot项目问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目js录当在eclipse启动spring boot项目时出现问题解决办法1.通过cmd命令行2.在ecl

SpringBoot项目Web拦截器使用的多种方式

《SpringBoot项目Web拦截器使用的多种方式》在SpringBoot应用中,Web拦截器(Interceptor)是一种用于在请求处理的不同阶段执行自定义逻辑的机制,下面给大家介绍Sprin... 目录一、实现 HandlerInterceptor 接口1、创建HandlerInterceptor实

Maven项目打包时添加本地Jar包的操作步骤

《Maven项目打包时添加本地Jar包的操作步骤》在Maven项目开发中,我们经常会遇到需要引入本地Jar包的场景,比如使用未发布到中央仓库的第三方库或者处理版本冲突的依赖项,本文将详细介绍如何通过M... 目录一、适用场景说明​二、核心操作命令​1. 命令格式解析​2. 实战案例演示​三、项目配置步骤​1