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

山东大学软件学院项目实训-基于大模型的模拟面试系统-Token过期重定向问题

项目结构

├── assets/          # 静态资源(CSS/图片)
├── components/      # Vue 组件
├── layouts/         # 布局模板
├── pages/           # 自动生成路由
├── plugins/         # 插件(如 axios 拦截器)
├── store/           # Vuex 状态管理
├── nuxt.config.js   # 项目配置
└── middleware/      # 路由中间件

Token过期或者退出登录重定向问题

功能实现

添加一个响应拦截器每次请求前需要先验证用户Token有没有过期,如果过期了,那么就直接重定向到登陆页面让用户重新进行登录操作。

eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIxNDkxNDAyMjM0Iiwic3ViIjoiMTQ5MTQwMjIzNCIsImlhdCI6MTc0NTE0ODg3OX0.hWqI3bww_oQCcQlqyqsI56TJrfIE0qK6uTT5gxqbCko

根据local storage里的信息发现该token中载荷由以下三部分组成:

  • jti (JWT ID):令牌唯一标识符
  • sub (Subject):主题/用户ID
  • iat (Issued At):签发时间(Unix时间戳)

上面三部分并没有关于过期时间exp 的字段说明,但从local storage·还发现了auth._token_expiration.local字段,于是将该字段最为判断token是否过期的凭证。

// auth.js
export default {// 获取tokengetToken() {return localStorage.getItem('auth._token.local') || '';},// 检查token是否过期isTokenExpired() {const storedExpiration = localStorage.getItem('auth._token_expiration.local');if (storedExpiration) {const isExpired = Date.now() >= parseInt(storedExpiration, 10);if (isExpired) {console.warn('[Auth] Token expired (based on localStorage expiration)');return true;}}let token = this.getToken()console.log(token)if (token == "false") return true;},// 清除tokenclearToken() {localStorage.removeItem('auth._token.local');localStorage.removeItem('refreshToken');},// 保存token (用于登录成功后)saveToken(token, refreshToken) {localStorage.setItem('auth._token.local', token);if (refreshToken) {localStorage.setItem('refreshToken', refreshToken);}}};

之后利用auth.js里的函数完成拦截器:

import axios from 'axios';
import auth from './auth'; // 创建axios实例
const instance = axios.create({baseURL: process.env.VUE_APP_API_BASE_URL, // 从环境变量获取基础URLtimeout: 10000 // 请求超时时间
});instance.interceptors.request.use(config => {// 检查token是否过期if (auth.isTokenExpired()) {auth.clearToken();if (process.client) {// 使用 Nuxt 的 redirect 方法window.location.href = '/login'; }// 终止请求return Promise.reject(new Error('Token expired'));}const token = auth.getToken();if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;},error => {// 请求错误处理return Promise.reject(error);}
);export default instance;

上述函数通过以下几步组成:

  1. Token检查:在每次请求前,通过auth.isTokenExpired()检查Token是否过期
  2. 过期处理:如果Token过期,则清除Token并重定向到登录页面
  3. Token添加:如果Token有效,则将其添加到请求头的Authorization字段中
  4. 错误处理:处理请求配置阶段的错误

Bug修改

完成上述实现之后,发现出现了下面这样的问题—列表类型的组件出现了非常多的重复的空的元素!!!但实际上正确的应该是只有一个面试官。
在这里插入图片描述
在这里插入图片描述

下面开始排查问题所在:

请求头携带的token格式错误

可能是多个并发请求同时检测到 Token 过期,导致多次重定向尝试。于是在下面添加一个类似于锁的机制:

// src/utils/axiosInstance.jslet isRedirecting = false; // 新添加
instance.interceptors.request.use(config => {if (auth.isTokenExpired() && !isRedirecting) { // 新添加isRedirecting = true;  // 新添加auth.clearToken();if (process.client) {window.location.href = '/login';}return Promise.reject(new Error('Token expired'));}return config;},error => {return Promise.reject(error);}
);

现在列表项的数目降到了3个。
在这里插入图片描述
但之后发现其实并不是isRedirecting 起了作用,而是将config.headers.Authorization = Bearer ${token};删了才起的作用。

这里是我完全解决了之后才回来重新写的
其实到了这一步后端就已经能返回正确的响应了,但当时并没有像之后那样看Network去分析,之前的问题就是我在拦截器里重新添加了Authorization,而偏偏我添加的是错的,这导致了之前会出现很多的空的项。
我通过分析Network里的没经过拦截器的请求头里的Authorization发现:Authorization里是没有Bearer的(见下图),之前加了Bearer反而错了

在这里插入图片描述

响应解封装错误

在这里插入图片描述
之后调试了很久,在Network里发现,后端明明相应了正确的请求,为什么会取不出来呢?
在这里插入图片描述
打印出来看一看,发现也没什么问题。

这是第二个问题,就是我使用了请求拦截器之后后端返回的响应不知道为什么会多封装一层,原本能够res.data取出的数据需要res.data.data才行,所以我就直接又加了一个响应拦截器。 (见下面代码)

instance.interceptors.response.use(response => {return response.data;},error => {// 处理HTTP错误状态码if (error.response) {switch (error.response.status) {case 401:window.location.href = '/login';break;}}// 返回错误信息return Promise.reject(error);}
);

相关文章:

山东大学软件学院项目实训-基于大模型的模拟面试系统-Token过期重定向问题

项目结构 ├── assets/ # 静态资源(CSS/图片) ├── components/ # Vue 组件 ├── layouts/ # 布局模板 ├── pages/ # 自动生成路由 ├── plugins/ # 插件(如 axios 拦截器) …...

树莓派系统中设置固定 IP

在基于 Ubuntu 的树莓派系统中,设置固定 IP 地址主要有以下几种方法: 方法一:使用 Netplan 配置(Ubuntu 18.04 及以上版本默认使用 Netplan) 查看网络接口名称 在终端输入ip link或ip a命令,查看当前所使…...

JBoss + WildFly 本地开发环境完全指南

JBoss WildFly 本地开发环境完全指南 本篇笔记主要实现在本地通过 docker 创建 JBoss 和 WildFly 服务器这一功能,基于红帽的禁制 EAP 版本的重新分发,所以我这里没办法放 JBoss EAP 的 zip 文件。WildFly 是免费开源的版本,可以在红帽官网找…...

网络原理 - 应用层, 传输层(UDP 和 TCP) 进阶, 网络层, 数据链路层 [Java EE]

目录 应用层 1. 应用层的作用 2. 自定义应用层协议 3. 应用层的 "通用协议格式" 3.1 xml 3.2 json 3.3 protobuffer (pd) 传输层 1. UDP 1.1 无连接 1.2 不可靠传输 1.3 面向数据报 1.4 全双工 1.5 缓冲区 1.6 UDP 数据报 2. TCP 2.1 有连接 …...

百级Function架构集成DeepSeek实践:Go语言超大规模AI工具系统设计

一、百级Function系统的核心挑战 1.1 代码结构问题 代码膨胀现象:单个文件超过2000行代码路由逻辑复杂:巨型switch-case结构维护困难依赖管理失控:跨Function依赖难以追踪 // 传统实现方式的问题示例 switch functionName { case "fu…...

全同态加密医疗数据分析集python实现

目录 摘要一、前言二、全同态加密与医疗数据分析概述2.1 全同态加密(FHE)简介2.2 医疗数据分析需求三、数据生成与预处理四、系统架构与流程4.1 系统架构图五、核心数学公式六、异步任务调度与(可选)GPU 加速七、PyQt6 GUI 设计八、完整代码实现九、自查测试与总结十、展望…...

字节头条golang二面

docker和云服务的区别 首先明确Docker的核心功能是容器化,它通过容器技术将应用程序及其依赖项打包在一起,确保应用在不同环境中能够一致地运行。而云服务则是由第三方提供商通过互联网提供的计算资源,例如计算能力、存储、数据库等。云服务…...

关于进程状态

目录 进程的各种状态 运行状态 阻塞状态 挂起状态 linux中的进程状态、 进程状态查看 S状态(浅睡眠) t 状态(追踪状态) T状态(暂停状态) ​编辑 kill命令手册 D状态(深度睡眠&#…...

操作系统是如何运行的?

硬件中断 在我们使用键盘的时候,操作系统要怎么知道键盘上有数据了呢?硬件中断! 硬件中断过程如图所示: 按照图中所示,外设直接与CPU进行交互,但是之前对于冯诺依曼体系架构的学习可知,外设要…...

【智驾中的大模型 -3】VLA 在自动驾驶中的应用

1.前言 在上一篇文章中,我们深入探讨了 VLM 模型在自动驾驶中的应用。VLA(Very Large Architecture,大型架构)和 VLM(Very Large Model,非常大模型)在 AI 领域皆指向超大规模的神经网络模型&am…...

Go语言中的sync.Map与并发安全数据结构完全指南

1. 引言 在Go语言的世界里,并发不是一个附加功能,而是语言的核心设计理念。那句广为人知的"Do not communicate by sharing memory; instead, share memory by communicating"(不要通过共享内存来通信,而应该通过通信来…...

ADVB协议

ADVB:航空数字视频总线 ADVB协议是基于FC光纤通道协议和FC-AV光纤音频视频协议标准来制定 的一种新型的数字视频接口和协议。 FC协议,FC-AV协议,FC-ADVB协议。 协议层次结构,协议拓扑结构。 ADVB总线协议container容器是作为基本传输单元…...

Vue3中provide和inject数据修改规则

在 Vue3 中,通过 inject 接收到的数据是否可以直接修改,取决于 provide 提供的值的类型和响应式处理方式: 1. 若提供的是普通值(非响应式数据) javascript 复制 // 父组件 provide(staticValue, 123); 子组件修改行…...

VuePress 使用教程:从入门到精通

VuePress 使用教程:从入门到精通 VuePress 是一个以 Vue 驱动的静态网站生成器,它为技术文档和技术博客的编写提供了优雅而高效的解决方案。无论你是个人开发者、团队负责人还是开源项目维护者,VuePress 都能帮助你轻松地创建和管理你的文档…...

Linux操作系统简介:从开源内核到技术生态

一、Linux的起源与核心架构 1. 历史背景与发展 1991年,芬兰赫尔辛基大学学生林纳斯托瓦兹(Linus Torvalds)开发了首个Linux内核。这一开源项目与GNU工具链结合,形成完整的GNU/Linux操作系统。截至2023年,Linux内核贡…...

iOS 应用性能测试工具对比:Xcode Instruments、克魔助手与性能狗

iOS 应用性能测试工具对比:Xcode Instruments、克魔助手与性能狗 在移动应用开发领域,性能优化是确保用户体验流畅、留存率高的关键因素。对于 iOS 开发者而言,选择合适的性能测试工具能够帮助快速定位和解决应用中的性能瓶颈。本文将深入分…...

CentOS 10 /root 目录重新挂载到新分区槽

1 观察 ##观察目录/root 所占的磁盘空间大小 rootbogon:~# du -smh /root/ 1.6G /root/ rootbogon:~# du -smh /* |grep root du: 无法访问 /proc/19146/task/19146/fd/3: 没有那个文件或目录 du: 无法访问 /proc/19146/task/19146/fdinfo/3: 没有那个文件或目录 du: 无法访问…...

【读书笔记·VLSI电路设计方法解密】问题64:什么是芯片的功耗分析

低功耗设计是一种针对VLSI芯片功耗持续攀升问题的设计策略。随着工艺尺寸微缩,单颗芯片可集成更多元件,导致功耗相应增长。更严峻的是,现代芯片工作频率较二十年前大幅提升,而功耗与频率呈正比关系。因此,芯片功耗突破…...

python爬虫复习

requests模块 爬虫的分类 通用爬虫:将一整张页面进行数据采集聚焦爬虫:可以将页面中局部或指定的数据进行采集 聚焦爬虫是需要建立在通用的基础上来实现 功能爬虫:基于selenium实现的浏览器自动化的操作分布式爬虫:使用分布式机群…...

深入解析主流数据库体系架构:从关系型到云原生

数据库是现代信息系统的核心组件,其体系架构设计直接影响性能、扩展性和可靠性。本文将从传统关系型数据库到新兴云原生数据库,系统解析主流数据库的架构特点及适用场景。 目录 一、关系型数据库(RDBMS)架构 ​​典型代表​​&…...

2026《数据结构》考研复习笔记四(第一章)

绪论 前言时间复杂度分析 前言 由于先前笔者花费约一周时间将王道《数据结构》知识点大致过了一遍,圈画下来疑难知识点,有了大致的知识框架,现在的任务就是将知识点逐个理解透彻,并将leetcode刷题与课后刷题相结合。因此此后的过…...

Mysql insert一条数据的详细过程

以下是MySQL在接收到INSERT语句后存储数据的详细过程解析,结合存储引擎(以InnoDB为例)和物理存储机制分步说明。 一、SQL解析与事务启动 1.语法解析 MySQL首先解析INSERT语句,验证字段是否存在、数据类型是否匹配、约束&#xf…...

流水灯右移程序(STC89C52单片机)

#include <reg52.h> sbit ADDR0 P1^0; sbit ADDR1 P1^1; sbit ADDR2 P1^2; sbit ADDR3 P1^3; sbit ENLED P1^4; void main() { unsigned int i 0; //定义循环变量i&#xff0c;用于软件延时 unsigned char cnt 0; //定义计数变量cnt&#xff0c;用…...

AI-Sphere-Butler之如何使用Llama factory LoRA微调Qwen2-1.5B/3B专属管家大模型

环境&#xff1a; AI-Sphere-Butler WSL2 英伟达4070ti 12G Win10 Ubuntu22.04 Qwen2.-1.5B/3B Llama factory llama.cpp 问题描述&#xff1a; AI-Sphere-Butler之如何使用Llama factory LoRA微调Qwen2-1.5B/3B管家大模型 解决方案&#xff1a; 一、准备数据集我这…...

智能体团队 (Agent Team)

概述 智能体团队是一种多智能体协作模式&#xff0c;它将多个智能体组织成一个团队&#xff0c;共同解决复杂任务。与智能体监督模式不同&#xff0c;智能体团队中的成员通常具有平等的地位&#xff0c;通过相互交流和协作来达成目标。这种模式特别适合需要多种观点或多领域专…...

AI日报 - 2025年04月19日

&#x1f31f; 今日概览(60秒速览) ▎&#x1f916; AGI突破 | OpenAI与Google模型在复杂推理上展现潜力&#xff0c;但距AGI仍有距离&#xff1b;因果AI被视为关键路径。 模型如o3解决复杂迷宫&#xff0c;o4-mini通过棋盘测试&#xff0c;但专家预测AGI仍需30年。 ▎&#x1…...

【实战中提升自己】内网安全部署之dot1x部署 本地与集成AD域的主流方式(附带MAC认证)

1 dot1x部署【用户名密码认证&#xff0c;也可以解决私接无线AP等功能】 说明&#xff1a;如果一个网络需要通过用户名认证才能访问内网&#xff0c;而认证失败只能访问外网与服务器&#xff0c;可以部署dot1x功能。它能实现的效果是&#xff0c;当内部用户输入正常的…...

算法—合并排序—js(场景:大数据且需稳定性)

合并排序基本思想&#xff08;稳定且高效&#xff09; 将数组递归拆分为最小单元&#xff0c;合并两个有序数组。 特点&#xff1a; 时间复杂度&#xff1a;O(n log n) 空间复杂度&#xff1a;O(n) 稳定排序 // 合并排序-分解 function mergeSort(arr) {if (arr.length < …...

绝对路径与相对路径

绝对路径和相对路径是在计算机系统中用于定位文件或目录的两种方式&#xff0c;以下是具体介绍&#xff1a; 绝对路径 • 定义&#xff1a;是从文件系统的根目录开始到目标文件或目录的完整路径&#xff0c;它包含了从根目录到目标位置的所有目录和子目录信息&#xff0c;具有…...

RabbitMQ,添加用户时,出现Erlang cookie不一致,导致添加用户失败的问题解决

1. 问题现象 RabbitMQ 添加用户&#xff0c;出现以下报错 ./rabbitmgctl add user admin admin666*2. 问题原因和解决方法 安装的 RabbitMQ 里的 Erlang cookie&#xff0c;和 Erlang 环境的 cookie 不一致导致的 解决方法&#xff1a;将 Erlang 环境的 cookie &#xff0c…...

阿拉丁神灯-第16届蓝桥第4次STEMA测评Scratch真题第2题

[导读]&#xff1a;超平老师的《Scratch蓝桥杯真题解析100讲》已经全部完成&#xff0c;后续会不定期解读蓝桥真题&#xff0c;这是Scratch蓝桥真题解析第219讲。 第16届蓝桥第4次STEMA测评已于2025年1月12日落下帷幕&#xff0c;编程题一共有5题&#xff08;初级组只有前4道编…...

常用的验证验证 onnxruntime-gpu安装的命令

#工作记录 我们经常会遇到明明安装了onnxruntime-gpu或onnxruntime后&#xff0c;无法正常使用的情况。 一、强制重新安装 onnxruntime-gpu 及其依赖 # 强制重新安装 onnxruntime-gpu 及其依赖 pip install --force-reinstall --no-cache-dir onnxruntime-gpu1.18.0 --extra…...

docker配置skywalking 监控springcloud应用

在使用 Docker 配置 SkyWalking 监控 Spring Cloud 应用时&#xff0c;主要分为以下几个步骤&#xff1a; 1. 准备工作 确保你的开发环境已经安装了 Docker 和 Docker Compose。准备好 Spring Cloud 应用代码&#xff0c;并确保它支持 SkyWalking 的探针&#xff08;Agent&…...

HBase安装与基本操作指南

## 1. 安装准备 首先确保您的系统已经安装了以下组件: - Java JDK 8或更高版本 - Hadoop(HBase可以运行在独立模式下,但建议配合Hadoop使用) ## 2. 下载与安装HBase ```bash # 下载HBase(以2.4.12版本为例) wget https://downloads.apache.org/hbase/2.4.12/hbase-2…...

【Linux】Rhcsa复习5

一、Linux文件系统权限 1、文件的一般权限 文件权限针对三类对象进行定义&#xff1a; owner 属主&#xff0c;缩写u group 属组&#xff0c; 缩写g other 其他&#xff0c;缩写o 每个文件针对每类访问者定义了三种主要权限&#xff1a; r&#xff1a;read 读 w&…...

C++11特性补充

目录 lambda表达式 定义 捕捉的方式 可变模板参数 递归函数方式展开参数包 数组展开参数包 移动构造和移动赋值 包装器 绑定bind 智能指针 RAII auto_ptr unique_ptr shared_ptr 循环引用 weak_ptr 补充 总结 特殊类的设计 不能被拷贝的类 只能在堆上创建…...

缓存 --- Redis性能瓶颈和大Key问题

缓存 --- Redis性能瓶颈和大Key问题 内存瓶颈网络瓶颈CPU 瓶颈持久化瓶颈大key问题优化方案 Redis 是一个高性能的内存数据库&#xff0c;但在实际使用中&#xff0c;可能会在内存、网络、CPU、持久化、大键值对等方面遇到性能瓶颈。下面从这些方面详细分析 Redis 的性能瓶颈&a…...

css3新特性第三章(文本属性)

一、文本属性 文本阴影文本换行文本溢出文本修饰文本描边 1.1 文本阴影 在 CSS3 中&#xff0c;我们可以使用 text-shadow 属性给文本添加阴影。 语法&#xff1a; text-shadow: h-shadow v-shadow blur color; 值描述h-shadow必需写&#xff0c;水平阴影的位置。允许负值。…...

Redis 缓存—处理高并发问题

Redis的布隆过滤器、单线程架构、双写一致性、比较穿透、击穿及雪崩、缓存更新方案及分布式锁。 1 布隆过滤器 是一种高效的概率型数据结构&#xff0c;用于判断元素是否存在。主要用于防止缓存穿透&#xff0c;通过拦截不存在的数据查询&#xff0c;避免击穿数据库。 原理&…...

嵌入式芯片中的 SRAM 内容细讲

什么是 RAM&#xff1f; RAM 指的是“随机存取”&#xff0c;意思是存储单元都可以在相同的时间内被读写&#xff0c;和“顺序访问”&#xff08;如磁带&#xff09;相对。 RAM 不等于 DRAM&#xff0c;而是一类统称&#xff0c;包括 SRAM 和 DRAM 两种主要类型。 静态随机存…...

实操基于MCP驱动的 Agentic RAG:智能调度向量召回或者网络检索

我们展示了一个由 MCP 驱动的 Agentic RAG&#xff0c;它会搜索向量数据库&#xff0c;当然如果有需要他会自行进行网络搜索。 为了构建这个系统&#xff0c;我们将使用以下工具&#xff1a; 博查搜索 用于大规模抓取网络数据。作为Faiss向量数据库。Cursor 作为 MCP 客户端。…...

位运算---总结

位运算 基础 1. & 运算符 : 有 0 就是 0 2. | 运算符 : 有 1 就是 1 3. ^ 运算符 : 相同为0 相异为1 and 无进位相加位运算的优选级 不用在意优先级,能加括号就加括号给一个数 n ,确定它的二进制位中第 x 位是 0 还是 1? 规定: 题中所说的第x位指:int 在32位机器下4个…...

从0开始搭建一套工具函数库,发布npm,支持commonjs模块es模块和script引入使用

文章目录 文章目标技术选型工程搭建1. 初始化项目2. 安装开发依赖3. 项目结构4. 配置文件tsconfig.json.eslintrc.jseslint.config.prettierrc.jsrollup.config.cjs创建 .gitignore文件 设置 Git 钩子创建示例工具函数8. 版本管理和发布9 工具函数测试方案1. 安装测试依赖2. 配…...

精通 Spring Cache + Redis:避坑指南与最佳实践

Spring Cache 以其优雅的注解方式&#xff0c;极大地简化了 Java 应用中缓存逻辑的实现。结合高性能的内存数据库 Redis&#xff0c;我们可以轻松构建出响应迅速、扩展性强的应用程序。然而&#xff0c;在享受便捷的同时&#xff0c;一些常见的“坑”和被忽视的最佳实践可能会悄…...

DSP28335入门学习——第一节:工程项目创建

写这个文章是用来学习的,记录一下我的学习过程。希望我能一直坚持下去,我只是一个小白,只是想好好学习,我知道这会很难&#xff0c;但我还是想去做&#xff01; 本文写于&#xff1a;2025.04.20 DSP28335开发板学习——第一节&#xff1a;工程项目创建 前言开发板说明引用解答…...

Docker Registry(镜像仓库)

官方架构 Docker 使用客户端 - 服务器 (C/S) 架构模式&#xff0c;使用远程 API 来管理和创建 Docker 容器。Docker 容器通过 Docker 镜像来创建。 Docker 仓库(Registry)&#xff1a;Docker 仓库用来保存镜像&#xff0c;可以理解为代码控制中的代码仓库。Docker Hu…...

通过Dify快速搭建本地AI智能体开发平台

1. 安装Docker Desktop 访问 Docker官网 点击Download Docker Desktop&#xff0c;直接按照官方要求来就可以。 # 这串命令就像魔法咒语&#xff0c;在黑色窗口&#xff08;命令提示符&#xff09;里输入就能检查安装是否成功 docker --version2.安装dify 3.运行 Ollama 大…...

计算机视觉与深度学习 | Transformer原理,公式,代码,应用

Transformer 详解 Transformer 是 Google 在 2017 年提出的基于自注意力机制的深度学习模型,彻底改变了序列建模的范式,解决了 RNN 和 LSTM 在长距离依赖和并行计算上的局限性。以下是其原理、公式、代码和应用的详细解析。 一、原理 核心架构 Transformer 由 编码器(Encod…...

skywalking agent 关联docker镜像

Apache SkyWalking 提供了多种方式来部署和使用 SkyWalking Agent&#xff0c;包括在 Docker 容器中运行的应用。虽然 SkyWalking Agent 本身不是一个独立的 Docker 镜像&#xff0c;但你可以通过几种方式将 SkyWalking Agent 集成到你的 Docker 应用中。 方式一&#xff1a;手…...

【中间件】nginx将请求负载均衡转发给网关,网关再将请求转发给对应服务

一、场景 前端将请求发送给nginx&#xff0c;nginx将请求再转发给网关&#xff0c;网关再将请求转发至对应服务。由于网关会部署在多台服务器上&#xff0c;因此nginx需要负载均衡给网关发请求。nginx所有配置均参照官方文档nginx开发文档&#xff0c;可参考负载均衡板块内容 二…...