vue文件下载请求blob文件流token失效的问题

页面停留很久token失效没有刷新页面,这时候点击下载依然可以导出文件,但是文件打不开且接口实际上返回的是401,这是因为文件下载的方式通过window创建a标签的形式打开的,并没有判断token失效问题
在这里插入图片描述

const res = await this.$axios.get(`url`,{responseType: 'blob'})
      let reader = new FileReader(); // 创建读取文件对象
      reader.readAsText(res.data, 'utf-8'); //读取文本文件
      reader.addEventListener("loadend", () => {
      //.loadend事件:读取完成最后触发。
          console.log(this.isToJSON(reader.result),'json');
          if (this.isToJSON(reader.result)) {
          //判断是否可以转换成JSON,可以转换就退出,不能就说明是文件,下面会贴出结果
            Notification({
                title:'异常登录',
                type:'warning',
                duration:2000,
                message:'token已失效,请重新登入'
            })
            setTimeout(()=>{
                window.location.href='/'
                localStorage.removeItem("token");
            },1000)
          } else {
            const link = document.createElement("a");
            console.log(res.data,'res.data');
            let blob = new Blob([res.data],{ type: 'application/zip,charset=utf-8'});  //文件流处理
            link.style.display = "none";  //去除a标签的样式
            // 设置连接
            link.href = URL.createObjectURL(blob)
            let fileName = new Date().getTime()
            link.download = fileName + '.zip'
            document.body.appendChild(link)
            //模拟点击事件
            link.click()
            //移除创建的a标签
            window.URL.revokeObjectURL(link.href)
            document.body.removeChild(link)
            this.downloadId=''
          }
        });

这里通过能不能转为JSON来判断是否为正确的文件流的原因是
如果是正确的文件流不能转为json:
在这里插入图片描述
如果是接口返回其他情况则可以:
在这里插入图片描述

isToJSON(str) { //判断是否可以转换成JSON格式
  if (typeof str == 'string') {
     try {
        JSON.parse(str);
        return true;
     } catch (e) {
       // console.log(e);
       return false;
     }
  }
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/240465.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

java开发的智能聊天机器人_超级AI_支持自动绘画功能

支持Web、Android、IOS、H5等多终端应用。它使用OpenAI的ChatGPT模型实现智能聊天机器人,并支持绘图自动生成Vincent图。未来还将接入国内大型AI模型,如文心一言、统一千问、MOSS等模型,并不断更新以满足用户需求。 AI大脑软件中的AI绘画功能…

SpringBoot中MyBatis-Flex的集成和使用

一、MyBatis-Flex 是什么​ MyBatis-Flex是一个基于MyBatis的数据访问框架,专门为Flex应用程序而设计的。它提供了一种灵活而高效的方式来处理Flex应用程序中的数据访问,可以轻松地连接到各种数据源,并提供了一些方便的工具和功能&#xff0c…

【NSX-T】3.搭建NSX-T环境 —— 以 Compute Manager 的形式注册 vCenter Server

目录 3. 以 Compute Manager 的形式注册 vCenter Server补充说明 参考资料 3. 以 Compute Manager 的形式注册 vCenter Server (1)在 NSX 用户界面主页上,依次选择 System > Configuration > Fabric > Compute Managers &#xff0…

博客社区资讯APP源码/开源知识付费社区小程序源码/资源社区源码/独有付费阅读+兼容安卓苹果

源码简介: 博客社区资讯APP源码,它是开源知识付费小程序源码,作为资源社区源码,它具有独有付费阅读兼容安卓苹果。它是Typecho后端的。 知识付费社区RuleApp多内容发布,后端基于Typoche博客程序开发带完整安装文档 竟…

蓝桥杯第一场强者挑战赛(C)SOSdp

之前在cf上面接触过SOSdp(子集dp),这里就碰到了。 思路: 异或运算即非进位加法运算,因此如果需要进位的话,那么就无法满足题意,因此条件弱化为不需要进位,也就是不存在同一位上面都是…

为什么要禁止除GET和POST之外的HTTP方法

一, HTTP请求有哪些 GET和POST是最为常见方法,而且大部分主流网站只支持这两种方法,因为它们已经可以满足功能需求。 GET获取服务器资源POST用来像服务器指定的URL的资源提交数据。其余方法一般服务器不会响应,并抛出404或405. …

Spring的IOC容器初始化流程

Spring的IOC容器初始化流程 IOC容器初始化在SpringApplication对象创建完毕执行run方法时执行refreshContext()时开始。 准备BeanFactory,设置其类加载器和environment等 执行BeanFactory后置处理器,扫描要放入容器的Bean信息,得到对应的Bea…

Linux命令——软件包管理

软件包管理 一、yum list二、yum install三、yum remove 总结 博主最近项目上线,操作了linux系统,感觉命令很容易遗忘,因此总结一下,本文记录的是linux中相关的软件包管理命令 如果是新建立的虚拟机,可能需要安装某些软…

Python 自动化之批量处理文件(一)

批量新建目录、文档Pro版本 文章目录 批量新建目录、文档Pro版本前言一、做成什么样子二、基本思路1.引入库2.基本架构 三、用户输入模块四、数据处理模块1.excel表格数据获取2.批量数据的生成 总结 前言 我来写一个不一样的批量新建吧。在工作中,有些同学应该会遇…

算法:有效的括号(入栈出栈)

时间复杂度 O(n) 空间复杂度 O(n∣Σ∣),其中 Σ 表示字符集,本题中字符串只包含 6 种括号 /*** param {string} s* return {boolean}*/ var isValid function(s) {const map {"(":")","{":"}","["…

Leetcode—2697.字典序最小回文串【简单】

2023每日刷题&#xff08;五十八&#xff09; Leetcode—2697.字典序最小回文串 实现代码 char * makeSmallestPalindrome(char * s){int len strlen(s);int left 0, right len - 1;while(left < len / 2) {if(s[left] > s[right]) {s[left] s[right];} else {s[ri…

记录使用mysql2中createConnection和createPool的区别

文章目录 前言config一、createConnection使用二、createPool总结如有启发&#xff0c;可点赞收藏哟~ 前言 查看mysql2源码可以看到连接数据库有两种方法&#xff0c;一种是createConnection&#xff0c;另一种是createPool。 为啥不只提供一种链接方式呢&#xff1f; 在开发w…

文件搜索项目知识介绍

项目背景SQLite介绍SQLite、驱动包下载SQLite使用SQLite和MySQL区别 JDBC搭配SQLiteJDBC原理-创建连接JDBC原理-关闭连接添加和发送SQLJDBC-事务开启和提交 打包.exe文件线程池线程数量问题 项目背景 需求上&#xff1a;因为Windows的文件搜索工具搜索速度十分的慢&#xff1b…

编程实战:自己编写HTTP服务器(系列6:调用用户功能)

系列入口&#xff1a;编程实战&#xff1a;自己编写HTTP服务器&#xff08;系列1&#xff1a;概述和应答&#xff09;-CSDN博客 本文讲解如何将原有C代码接入到WEB服务里。 目录 一、概述 二、框架入口 三、执行用户功能 3.1 代码 3.2 入口参数 3.3 系统检查和初始化 3…

消息队列kafka详解:Kafka重要知识点+面试题大全

重要面试知识点 Kafka 消费端确保一个 Partition 在一个消费者组内只能被一个消费者消费。这句话改怎么理解呢&#xff1f; 在同一个消费者组内&#xff0c;一个 Partition 只能被一个消费者消费。 在同一个消费者组内&#xff0c;所有消费者组合起来必定可以消费一个 Topic 下…

【flutter对抗】blutter使用+ACTF习题

最新的能很好反编译flutter程序的项目 1、安装 git clone https://github.com/worawit/blutter --depth1​ 然后我直接将对应的两个压缩包下载下来&#xff08;通过浏览器手动下载&#xff09; 不再通过python的代码来下载&#xff0c;之前一直卡在这个地方。 如果读者可以…

npm安装

node 设置配置之后&#xff0c;要查询时&#xff0c;会从.npmrc中读取路径 .npmrc自己创建的&#xff08;默认情况下.npmrc会创建在C盘中&#xff09; 自己创建的在D:\studay-and-working\node16.14\node_modules\npm中 指定.npmrc文件&#xff0c;因为默认会访问C盘的.npmrc文…

在Windows系统和Linux系统中MongoDB的安装方法

本文主要介绍在Windows系统和Linux系统中MongoDB的安装方法。 目录 Windows系统中安装MongoDBLinux系统中安装MongoDB Windows系统中安装MongoDB 在Windows系统中安装MongoDB&#xff0c;可以分为以下几个步骤&#xff1a; 下载MongoDB安装包 在MongoDB官网上下载Windows系统下…

【Linux学习】深入理解动态库与静态库

目录 十三.动态库与静态库 13.1 认识动静态库 13.2 深入理解动静态库 什么是库? 编译链接过程 动静态库的基本原理 13.3 静态库 静态库的打包: 静态库的使用: 13.4 动态库 动态库的打包: 动态库的使用: 13.5 动态库与静态库怎么选? 十三.动态库与静态库 13.1 认识动静态库 …

Vue 中 v-model 的修饰符

lazy 修饰符&#xff1a;将 v-model 改为失去焦点后更新数据。 number 修饰符&#xff1a;将 v-model 数据转为数字类型。 trim 修饰符&#xff1a;去除 v-model 数据中的首尾空格。 语法格式&#xff1a; // lazy 修饰符 <input v-model.lazy"数据"> // nu…