从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战七(axios请求头带上token)

本文主要是介绍从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战七(axios请求头带上token),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

本系列项目教程最终演示效果如下:

管理后台在线演示

上节遗留问题

上一节我们看到,页面刷新时,store中的数据丢失。表现在页面上是只要我们刷新页面,当前登录的用户名就丢失。这对使用系统的用户不是十分友好。另外,我们请求除了登录,注册之外的接口时,都需要带上认证token,这个token是我们在登录或注册成功后的回应中返回回来的。这2个问题如何解决呢?

一种可行的做法是,我们可以将登录或注册成功后的回应中返回的token保存在store的同时,保存在localstorage中一份,保存在localstorage中的数据,不用说刷新页面,即使关闭浏览器浏览器也不会消失。
然后,我们在axios中添加一个请求拦截器,为每个请求,在http请求头中补充一个Authorization属性。这样服务器才会正常返回数据。

而在用户刷新页面时,main.ts方法会被调用(在store中数据丢失之后),我们可以在此处,再次调用服务器的getUser接口,重新获取用户信息,并保存到store中。因为虽然store中数据已经丢失,但localstorage保存的token还在,所以我们再次请求getUser接口可以返回当前用户信息。更多详情请参照以下代码。

封装storage存取

utils目录下新增storage.ts

export const storage = (key: string) => ({get<T>(): T | null {const item = window.localStorage.getItem(key);return item ? JSON.parse(item) : null;},set<T>(value: T) {window.localStorage.setItem(key, JSON.stringify(value));},remove() {window.localStorage.removeItem(key);},
});

新增getUser接口调用

api/index.ts


![1717551308043.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5ae03a97a9fa4a31869c248cac002833~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1456&h=357&s=42380&e=png&b=1e1e1e)

store新增verifyAuth函数

1717551475927.png

页面刷新时,重新加载当前用户信息

1717551557015.png

axios请求拦截器在请求头中追加token

1717551624270.png

验证测试

首先清除token

1717551692374.png

然后重新注册,成功跳转到主页后,会发现不断刷新页面,用户信息也不消失了。同时每次刷新页面,会看到都有向服务器发送getUser请求。

1717551828572.png

而且你仔细对比的话,每次getUser返回的token都不同,说明服务器给我们换了token,不过这对我们没有影响,因为都是有效的token。

这篇关于从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战七(axios请求头带上token)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

从入门到进阶讲解Python自动化Playwright实战指南

《从入门到进阶讲解Python自动化Playwright实战指南》Playwright是针对Python语言的纯自动化工具,它可以通过单个API自动执行Chromium,Firefox和WebKit... 目录Playwright 简介核心优势安装步骤观点与案例结合Playwright 核心功能从零开始学习

Java docx4j高效处理Word文档的实战指南

《Javadocx4j高效处理Word文档的实战指南》对于需要在Java应用程序中生成、修改或处理Word文档的开发者来说,docx4j是一个强大而专业的选择,下面我们就来看看docx4j的具体使用... 目录引言一、环境准备与基础配置1.1 Maven依赖配置1.2 初始化测试类二、增强版文档操作示例2.

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.

MySQL 多列 IN 查询之语法、性能与实战技巧(最新整理)

《MySQL多列IN查询之语法、性能与实战技巧(最新整理)》本文详解MySQL多列IN查询,对比传统OR写法,强调其简洁高效,适合批量匹配复合键,通过联合索引、分批次优化提升性能,兼容多种数据库... 目录一、基础语法:多列 IN 的两种写法1. 直接值列表2. 子查询二、对比传统 OR 的写法三、性能分析

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控

Python办公自动化实战之打造智能邮件发送工具

《Python办公自动化实战之打造智能邮件发送工具》在数字化办公场景中,邮件自动化是提升工作效率的关键技能,本文将演示如何使用Python的smtplib和email库构建一个支持图文混排,多附件,多... 目录前言一、基础配置:搭建邮件发送框架1.1 邮箱服务准备1.2 核心库导入1.3 基础发送函数二、

PowerShell中15个提升运维效率关键命令实战指南

《PowerShell中15个提升运维效率关键命令实战指南》作为网络安全专业人员的必备技能,PowerShell在系统管理、日志分析、威胁检测和自动化响应方面展现出强大能力,下面我们就来看看15个提升... 目录一、PowerShell在网络安全中的战略价值二、网络安全关键场景命令实战1. 系统安全基线核查

Knife4j+Axios+Redis前后端分离架构下的 API 管理与会话方案(最新推荐)

《Knife4j+Axios+Redis前后端分离架构下的API管理与会话方案(最新推荐)》本文主要介绍了Swagger与Knife4j的配置要点、前后端对接方法以及分布式Session实现原理,... 目录一、Swagger 与 Knife4j 的深度理解及配置要点Knife4j 配置关键要点1.Spri

从原理到实战深入理解Java 断言assert

《从原理到实战深入理解Java断言assert》本文深入解析Java断言机制,涵盖语法、工作原理、启用方式及与异常的区别,推荐用于开发阶段的条件检查与状态验证,并强调生产环境应使用参数验证工具类替代... 目录深入理解 Java 断言(assert):从原理到实战引言:为什么需要断言?一、断言基础1.1 语

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次,点赞13次,收藏8次。本文详细介绍了Java分层架构中的几个关键包:DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1