当前位置: 首页 > news >正文

Axios 响应拦截器与未登录状态的统一处理

目录

  • 前言
  • 1. 响应拦截器的作用与应用场景
    • 1.1 什么是响应拦截器?
    • 1.2 响应拦截器的应用场景
  • 2. 代码解读:响应拦截器中的未登录处理
    • 2.1 原始代码分析
  • 3. 完善未登录处理逻辑
    • 3.1 未登录状态的用户体验优化
    • 3.2 改进后的代码实现
  • 4. 实践中的场景
    • 4.1 登录态的动态检测
    • 4.2 重定向后的场景复现
  • 5. 结语

前言

在现代前端开发中,Axios作为主流的HTTP请求库之一,深受开发者青睐。它不仅支持便捷的请求和响应操作,还提供了强大的拦截器机制,可以帮助我们实现统一的错误处理、身份校验、状态码管理等功能。本文将结合代码示例,详细解析如何在响应拦截器中处理未登录状态,并实现功能完善、用户体验友好的跳转逻辑。

1. 响应拦截器的作用与应用场景

1.1 什么是响应拦截器?

响应拦截器是 Axios 提供的一种扩展机制,允许开发者在每次请求响应到达前对数据进行预处理。它主要用于统一管理响应数据的处理逻辑。通过拦截器,可以避免在每个请求的 .then.catch 中重复编写相同的逻辑,从而提升代码的可维护性。
在这里插入图片描述

1.2 响应拦截器的应用场景

以下是响应拦截器的一些典型应用场景:

  • 状态码统一处理:对后端返回的状态码进行解析,根据业务逻辑分类处理,例如成功、失败或未授权等。
  • 全局错误提示:在响应失败时弹出提示信息,让用户感知请求状态。
  • 用户登录状态校验:在返回401(未授权)时跳转到登录页面,避免未登录状态下的后续请求。
  • 数据格式统一化:根据需求对响应数据进行重组,方便后续的业务逻辑使用。

在这里插入图片描述

2. 代码解读:响应拦截器中的未登录处理

2.1 原始代码分析

以下是我们处理响应逻辑的代码片段:

import router from '@/router';// 添加响应拦截器
instance.interceptors.response.use(result => {// 判断业务状态码if (result.data.code === 0) {return result.data;}// 操作失败,弹出错误提示ElMessage.error(result.data.msg ? result.data.msg : '服务异常');// 异步操作状态转换为失败return Promise.reject(result.data);},err => {// 处理未登录状态if (err.response.status === 401) {ElMessage.error('请先登录');router.push('/login');} else {// 处理其他服务异常ElMessage.error('服务异常');}return Promise.reject(err); // 异步状态转为失败}
);

从这段代码中可以看出,我们通过拦截器对请求结果进行了两层处理:

  1. 正常响应处理:当后端返回的业务状态码为 0 时,直接返回结果,表示操作成功。
  2. 错误响应处理:根据 HTTP 状态码分类处理,尤其对 401 未授权状态进行了跳转和提示。

3. 完善未登录处理逻辑

3.1 未登录状态的用户体验优化

在用户未登录的情况下,直接跳转到登录页面可能会让用户感到突兀。我们可以通过以下优化措施提升用户体验:

  1. 保留跳转前页面的路径:在跳转到登录页面前记录用户当前的访问路径,待登录成功后引导用户回到之前的页面。
  2. 统一错误提示文案:通过更加人性化的提示语,引导用户登录。
  3. 登录会话的有效性检测:定期检查用户的登录状态,提前提醒用户登录信息将过期,避免频繁的跳转操作。

3.2 改进后的代码实现

以下是改进后的代码实现:

import router from '@/router';
import store from '@/store'; // 假设使用 Vuex 管理状态instance.interceptors.response.use(result => {// 成功响应的处理逻辑if (result.data.code === 0) {return result.data;}// 操作失败提示ElMessage.error(result.data.msg || '服务异常');return Promise.reject(result.data);},err => {// 未授权状态处理if (err.response.status === 401) {ElMessage.warning('您的登录状态已失效,请重新登录');// 保存当前路径const currentPath = router.currentRoute.value.fullPath;store.commit('auth/setRedirectPath', currentPath); // 假设在 Vuex 中管理重定向路径// 跳转到登录页面router.push('/login');} else {// 其他错误提示ElMessage.error('服务异常,请稍后再试');}return Promise.reject(err);}
);

4. 实践中的场景

4.1 登录态的动态检测

在实际应用中,用户的登录状态可能在未操作一段时间后失效。因此,除了在请求响应时检测状态码 401,我们还可以结合前端轮询或心跳机制,主动检测用户的登录态是否有效。例如:

  • 在每次用户操作时重新刷新 Token 的有效期。
  • 使用 WebSocket 或定时器检测服务器端的登录状态。

4.2 重定向后的场景复现

通过在未登录时记录用户访问的路径,我们可以在登录成功后还原用户的访问场景。具体实现思路为:

  1. 在 Vuex 或其他状态管理工具中存储用户跳转前的路径。
  2. 在用户登录成功时,从存储中取出路径并跳转到目标页面。
  3. 如果没有记录路径,则跳转到首页或其他默认页面。

示例代码:

// 在登录页面处理登录成功后的跳转
const redirectPath = store.state.auth.redirectPath || '/';
router.push(redirectPath);
store.commit('auth/clearRedirectPath'); // 清除记录,防止重复跳转

5. 结语

响应拦截器作为 Axios 的核心功能之一,在前端项目中起到了承上启下的作用。通过对响应数据的统一处理,我们不仅能提升代码的复用性,还能大幅改善用户体验。针对未登录状态的处理,我们从用户体验的角度出发,优化了跳转逻辑并引入了状态记录与场景复现功能,这些改进措施能够让应用更加流畅、智能。

相关文章:

Axios 响应拦截器与未登录状态的统一处理

目录 前言1. 响应拦截器的作用与应用场景1.1 什么是响应拦截器?1.2 响应拦截器的应用场景 2. 代码解读:响应拦截器中的未登录处理2.1 原始代码分析 3. 完善未登录处理逻辑3.1 未登录状态的用户体验优化3.2 改进后的代码实现 4. 实践中的场景4.1 登录态的…...

【MySQL系列】深入理解MySQL中的存储、排序字符集

前言 在创建数据库时,我们经常会需要填写数据库的所用字符集、排序规则,字符集和排序规则是两个非常重要的概念,它们决定了数据库如何存储和比较字符串数据。在 MySQL 中,常用的存储字符集有 utf8、utf8mb4,而排序字符…...

【ARM Coresight OpenOCD 系列 5.1 -- OpenOCD 无法识别CPUID 问题: xxx is unrecognized】

请阅读【嵌入式开发学习必备专栏】 文章目录 OpenOCD 无法识别CPUID 问题ARM CPUIDCPUID 特性CPUID 寄存器字段OpenOCD 无法识别CPUID 问题 在使用OpenOCD 进行CPU debug的过程中有时会报出 无法识别CPUID的问题,本文将会介绍如何解决这个问题。首先我们来学习下什么是CPUID,…...

YOLOv11融合针对小目标FFCA-YOPLO中的FEM模块及相关改进思路

YOLOv11v10v8使用教程: YOLOv11入门到入土使用教程 YOLOv11改进汇总贴:YOLOv11及自研模型更新汇总 《FFCA-YOLO for Small Object Detection in Remote Sensing Images》 一、 模块介绍 论文链接:https://ieeexplore.ieee.org/document/10…...

【Docker容器】一、一文了解docker

1、什么是docker? 1.1 docker概念 Docker是一种容器化平台,通过使用容器技术,Docker允许开发人员将应用程序和其依赖项打包到一个独立的、可移植的容器中。每个容器具有自己的文件系统、环境变量和资源隔离,从而使应用程序可以在…...

【团购核销】抖音生活服务商家应用快速接入①——基础工作

文章目录 一、前言二、抖音开放平台(服务商平台)三、认证服务能力四、第三方生活服务商家应用五、APPID和AppSecret六、申请接口权限七、开发配置八、参考 一、前言 目的:将抖音团购核销的功能集成到我们自己开发的App和小程序中 【团购核销】…...

MyBatis实践:提高持久化层数据处理效率

一、MyBatis简介: 1.简介:https://mybatis.org/mybatis-3/zh/index.html?spmwolai.workspace.0.0.66162306mX2SuC MyBatis最初是Apache的一个开源项目iBatis, 2010年6月这个项目由Apache Software Foundation迁移到了Google Code。随着开发团队转投Google Code旗下&#xff…...

如何理解Lua 使用虚拟堆栈

虚拟堆栈的基本概念 Lua使用虚拟堆栈来实现Lua和C(或其他宿主语言)之间的交互。这个虚拟堆栈是一个数据结构,用于存储Lua的值,如数字、字符串、表、函数等。它在Lua状态机(lua_State)内部维护,为…...

UE5 腿部IK 解决方案 footplacement

UE5系列文章目录 文章目录 UE5系列文章目录前言一、FootPlacement 是什么?二、具体实现 前言 在Unreal Engine 5 (UE5) 中,腿部IK(Inverse Kinematics,逆向运动学)是一个重要的动画技术,用于实现角色脚部准…...

SMMU软件指南之概述

安全之安全(security)博客目录导读 目录 1. 概述 1.1 开始之前 2. SMMU 的功能 1. 概述 本博客描述了 ARM 系统内存管理单元(SMMUv3)的基本操作及其使用案例,包括: • SMMU 架构概念、术语和操作 • 与 SMMU 功能相关的系统级考虑因素 • 典型 SMMU 使用案例的知识 1…...

Vue_Router权限控制:不同角色显示不同路由

写在前面 在Vue中,Router是一个官方提供的用于处理应用程序路由的插件。它允许我们创建单页应用程序(SPA),其中不同的页面和组件可以通过URL进行导航和展示。使我们可以轻松地创SPA,并实现可复用和可组合的组件…...

机器学习4

九、线性回归 1、概念 假设存在多个点,需要使用一条线来保障尽量拟合这些点,寻找这条线的过程就叫回归。 机器学习中一种有监督学习的算法,回归问题主要关注的是因变量(需要预测的值)和一个或多个数值型的自变量(预测变量)之间的关系。 2、损失…...

Linux中系统的延迟任务及定时任务

一、延时任务 at 命令,即用即消 如 at 11:30 rm -rf /mnt/* ctrld运行 (过一秒即可执行) -v 使用较明显的时间格式,列出at调度中的任务列表 -l 可列出目前系统上面的所有该用户的at调度 -c 可以列出后面接…...

从Stream的 toList() 和 collect(Collectors.toList()) 方法看Java的不可变流

环境 JDK 21Windows 11 专业版IntelliJ IDEA 2024.1.6 背景 在使用Java的Stream的时候,常常会把流收集为List。 假设有List list1 如下: var list1 List.of("aaa", "bbbbbb", "cccc", "d", "eeeee&qu…...

centos7.9单机版安装K8s

1.安装docker [rootlocalhost ~]# hostnamectl set-hostname master [rootlocalhost ~]# bash [rootmaster ~]# mv /etc/yum.repos.d/* /home [rootmaster ~]# curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo [rootmaster ~]# cu…...

Notepad++--在开头快速添加行号

原文网址:Notepad--在开头快速添加行号_IT利刃出鞘的博客-CSDN博客 简介 本文介绍Notepad怎样在开头快速添加行号。 需求 原文件 想要的效果 方法 1.添加点号 Alt鼠标左键,从首行选中首列下拉,选中需要添加序号的所有行的首列&#xff…...

如何在 PyCharm 中配置 HTTP 代理以确保网络连接的顺畅性

如何在 PyCharm 中配置 HTTP 代理以确保网络连接的顺畅性 在配置 PyCharm 的 HTTP 代理以确保网络连接的顺畅性时,需按照一定的步骤进行设置,这不仅有助于确保 PyCharm 能够顺利访问互联网资源,还能保证插件和工具的正常更新与同步。以下是详…...

查找萤石云IOS Sdk中的编解码接口

2021/1/20 以前的时候,碰到的问题,想把萤石云视频介入到TRTC,但是... 萤石云的IOS接口中没有相应的解码播放库,也就是找不到PlayerSDK对应部分,怎么做呢? 一个是坐等萤石云开放这部分接口,可能…...

webpack配置

4-3vue-loader测试_哔哩哔哩_bilibili 一.新建文件夹vue_todo,vscode打开 二.ctrl打开终端,输入npm init -y,快速生成一个默认的package.json文件 之后左边出现项目初始化文件package.json 三.接下来需要webpack完成打包,所以安装…...

Streamlit + AI大模型API实现视频字幕提取

简介 在本文中,我将带你探讨如何使用Streamlit和AI大模型API来实现视频字幕提取的技术。Streamlit是一个开源的Python库,用于快速构建数据应用的Web界面,而AI大模型API,如OpenAI,提供了强大的语言处理能力&#xff0c…...

11.21 深度学习-tensor常见操作

import torch from PIL import Image from torchvision import transforms # 获取元素值 tensor.item() 返回一个数值 只能是tensor里面有一个数字的 # 我们可以把单个元素tensor转换为Python数值,这是非常常用的操作 # tensor 里面超过了1个数字就不行 def g…...

gitlab和jenkins连接

一:jenkins 配置 安装gitlab插件 生成密钥 id_rsa 要上传到jenkins,id_rsa.pub要上传到gitlab cat /root/.ssh/id_rsa 复制查看的内容 可以看到已经成功创建出来了对于gitlab的认证凭据 二:配置gitlab cat /root/.ssh/id_rsa.pub 复制查…...

从视频帧生成点云数据、使用PointNet++模型提取特征,并将特征保存下来的完整实现。

文件地址 https://github.com/yanx27/Pointnet_Pointnet2_pytorch?spm5176.28103460.0.0.21a95d27ollfze Pointnet_Pointnet2_pytorch\log\classification\pointnet2_ssg_wo_normals文件夹改名为Pointnet_Pointnet2_pytorch\log\classification\pointnet2_cls_ssg "E:…...

vue3 + Element Plus + ts 封装全局的 message、messageBox、notification 方法

本文示例将 Element Plus 中的 ElMessage 消息提示, ElMessageBox 消息弹出框, ElNotification 消息通知 方法统一封装到全局 hooks 文件中方便全局调用 准备:在项目 src 目录中新建 hooks 目录、然后在 hooks 目录中新建 index.ts (如果你没有使用 ts …...

【人工智能】Python在机器学习与人工智能中的应用

Python因其简洁易用、丰富的库支持以及强大的社区,被广泛应用于机器学习与人工智能(AI)领域。本教程通过实用的代码示例和讲解,带你从零开始掌握Python在机器学习与人工智能中的基本用法。 1. 机器学习与AI的Python生态系统 Pyth…...

linux上安装docker

在 Linux 上安装 Docker 是一个相对简单的过程。以下是针对 Debian 和其他基于 Debian 的发行版(如 Ubuntu)的详细步骤。如果您使用的是其他发行版(如 CentOS 或 Fedora),也可以参考相应的官方文档进行安装。 安装 Do…...

LeetCode:1008. 前序遍历构造二叉搜索树

目录 题目描述: 代码: 第一种: 第二种: 第三种:分治法 题目描述: 给定一个整数数组,它表示BST(即 二叉搜索树 )的 先序遍历 ,构造树并返回其根。 保证 对于给定的测试用例,总是有可能找到具有给定需求的二叉搜索树。 二叉搜索树 是一棵…...

开源远程桌面工具:RustDesk

在远程办公和远程学习日益普及的今天,我们经常需要远程访问办公电脑或帮助他人解决电脑问题。 市面上的远程控制软件要么收费昂贵,要么需要复杂的配置,更让人担心的是数据安全问题。 最近我发现了一款名为 RustDesk 的开源远程桌面工具&…...

nfs服务器--RHCE

一,简介 NFS(Network File System,网络文件系统)是FreeBSD支持的文件系统中的一种,它允许网络中的计 算机(不同的计算机、不同的操作系统)之间通过TCP/IP网络共享资源,主要在unix系…...

使用 Elastic 3 步实现基于 OTel 的原生 K8s 和应用可观测性

作者:来自 Elastic Bahubali Shetti Elastic 的 OpenTelemetry 发行版现已支持 OTel Operator,可使用 EDOT SDK 自动检测应用程序,并管理 EDOT OTel Collector 的部署和生命周期以实现 Kubernetes 可观察性。了解如何通过 3 个简单步骤进行配…...

Vue3-小兔鲜项目出现问题及其解决方法(未写完)

基础操作 (1)使用create-vue搭建Vue3项目 要保证node -v 版本在16以上 (2)添加pinia到vue项目 npm init vuelatest npm i pinia //导入creatPiniaimport {createPinia} from pinia//执行方法得到实例const pinia createPinia()…...

【mysql】锁机制 - 3.意向锁

意向锁(Intension Lock) 是为了提高粗粒度锁性能而设置的一种预判机制,即在一个操作发起实际资源的锁申请行为之前,先对更粗力度的资源发起一个加锁意向声明。 为什么需要意向锁? 比如对于以下操作: 事务…...

Nuxt3 动态路由URL不更改的前提下参数更新,NuxtLink不刷新不跳转,生命周期无响应解决方案

Nuxt3 动态路由URL不更改的前提下参数更新,NuxtLink不刷新不跳转,生命周期无响应解决方案 首先说明一点,Nuxt3 的动态路由响应机制是根据 URL 是否更改,参数的更改并不会触发 Router 去更新页面,这在 Vue3 上同样存在…...

Spring Boot集成Redis:配置、序列化与持久化

Spring Boot集成Redis:配置、序列化与持久化 一、简介 什么是Redis Redis是一个开源的、基于内存的高性能键值对存储数据库,支持多种数据结构如字符串、哈希、列表、集合等。它以其卓越的性能、高可用性和持久性而广受欢迎。 为什么要使用Redis Red…...

JAVA:探索 PDF 文字提取的技术指南

1、简述 随着信息化的发展,PDF 文档成为了信息传播的重要媒介。在许多应用场景下,如数据迁移、内容分析和信息检索,我们需要从 PDF 文件中提取文字内容。JAVA提供了多种库来处理 PDF 文件,其中 PDFBox 和 iText 是最常用的两个。…...

当你项目服务器磁盘报警

当你们公司运维收到这样的邮件,大概率日志文件过大引起的 在Linux下如何不停止服务,清空nohup.out文件呢? nohup.out会一直一直自己增长下去,如果你的服务器硬盘不给力的话,很容易把应用也挂掉(硬盘没空间 &#xff0…...

SpringBoot中Maven的定义及国内源配置教程,实现自动获取Jar包

推荐一个国内镜像API网站,无需信用卡及科学上网即可调用gpt,claude3,gemini等国外模型,感兴趣的可以看下👉:https://api.atalk-ai.com/ SpringBoot中Maven的定义及国内源配置教程,实现自动获取J…...

LSTM 和 LSTMCell

1. LSTM 和 LSTMCell 的简介 LSTM (Long Short-Term Memory): 一种特殊的 RNN(循环神经网络),用于解决普通 RNN 中 梯度消失 或 梯度爆炸 的问题。能够捕获 长期依赖关系,适合处理序列数据(如自然语言、时间序列等&…...

【卡尔曼滤波】数据预测Prediction观测器的理论推导及应用 C语言、Python实现(Kalman Filter)

【卡尔曼滤波】数据预测Prediction观测器的理论推导及应用 C语言、Python实现(Kalman Filter) 更新以gitee为准: 文章目录 数据预测概念和适用方式线性系统的适用性 数据预测算法和卡尔曼滤波公式推导状态空间方程和观测器先验估计后验估计…...

神经网络问题之一:梯度消失(Vanishing Gradient)

梯度消失(Vanishing Gradient)问题是深度神经网络训练中的一个关键问题,它主要发生在反向传播过程中,导致靠近输入层的权重更新变得非常缓慢甚至几乎停滞,严重影响网络的训练效果和性能。 图1 在深度神经网络中容易出现…...

【微软:多模态基础模型】(4)统一视觉模型

欢迎关注[【youcans的AGI学习笔记】](https://blog.csdn.net/youcans/category_12244543.html)原创作品 【微软:多模态基础模型】(1)从专家到通用助手 【微软:多模态基础模型】(2)视觉理解 【微…...

npm | Yarn | pnpm Node.js包管理器比较与安装

一、包管理器比较 参考原文链接: 2024 Node.js Package Manager 指南:npm、Yarn、pnpm 比较 — 2024 Node.js Package Manager Guide: npm, Yarn, pnpm Compared (nodesource.com) 以下是对 Node.js 的三个包管理工具 npm、Yarn 和 pnpm 的优缺点总结&am…...

建造者模式

什么是建造者模式? 建造者模式(Builder Pattern)是一种设计模式,用来一步步创建复杂的对象,而不用直接去调用复杂的构造函数或手动设置大量属性。 你可以: • 按步骤“搭建”对象。 • 自由选择要设置的部…...

Spring Boot核心概念:应用配置

Spring Boot提供了强大的配置系统,允许开发者通过配置文件轻松管理应用的配置。支持的主要配置文件格式有两种:application.properties和application.yml。 application.properties与application.yml application.properties和application.yml是Spring…...

linux环境安装cuda toolkit

1 全新安装 如果环境中没安装过cuda版本, 这种情况下比较简单。 直接在https://developer.nvidia.com/cuda-toolkit-archive选择对应版本下载安装即可。 如下为安装cuda toolkit 11.8. 2 环境中已经存在其他版本 这种情况下比较复杂一些。 首先要确认最高支持的版…...

WebSocket实战,后台修改订单状态,前台实现数据变更,提供前端和后端多种语言

案例场景: 在实际的后台中需要变更某个订单的状态,在官网中不刷新页面,可以自动更新状态 在前端页面实现订单状态的实时更新(不刷新页面),可以通过 WebSocket 的方式与后台保持通信,监听订单状态…...

实时通信协议概述:WebRTC、RTP/RTCP、RTMP、HLS 和 FLV 的比较与应用

文章目录 一、协议总览二、WebRTC2.1 时序图2.2 代码示例 三、RTP/RTCP3.1 时序图3.2 代码示例 四、RTMP4.1 时序图4.2 代码示例 五、HLS5.1 时序图5.2 代码示例 六、总结 一、协议总览 协议/格式细节对比适用场景用法WebRTC使用 UDP 传输协议,支持 P2P 通信&#…...

Vue路由

目录 1. 安装 vue-router 2. 创建 Vue 项目结构 3. 配置路由 4. 在 main.js 中使用路由 5. 在 App.vue 中添加 6. 创建组件 7. 运行你的应用 在 Vue.js 2 中,路由管理通常通过 vue-router 插件来实现。vue-router 是一个官方的路由管理器,允许你…...

uniapp开发微信小程序笔记3-全局配置、导航栏配置、tabBar配置

前言: 本文记录的是微信小程序的全局配置、导航栏配置、tabBar配置 一、全局配置: 可以直接查官方文档:pages.json 页面路由 | uni-app官网,有非常详细的文档说明 都是在 pages.json里面做配置的,我们可以看到已经有…...

Hash table类算法【leetcode】

哈希表中关键码就是数组的索引下标,然后通过下标直接访问数组中的元素 那么哈希表能解决什么问题呢,一般哈希表都是用来快速判断一个元素是否出现集合里。 例如要查询一个名字是否在这所学校里。 要枚举的话时间复杂度是O(n),但如果使用哈希…...