从零开始手把手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

相关文章

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤

如何使用Java实现请求deepseek

《如何使用Java实现请求deepseek》这篇文章主要为大家详细介绍了如何使用Java实现请求deepseek功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1.deepseek的api创建2.Java实现请求deepseek2.1 pom文件2.2 json转化文件2.2

Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

《Android悬浮窗开发示例((动态权限请求|前台服务和通知|悬浮窗创建)》本文介绍了Android悬浮窗的实现效果,包括动态权限请求、前台服务和通知的使用,悬浮窗权限需要动态申请并引导... 目录一、悬浮窗 动态权限请求1、动态请求权限2、悬浮窗权限说明3、检查动态权限4、申请动态权限5、权限设置完毕后

使用 sql-research-assistant进行 SQL 数据库研究的实战指南(代码实现演示)

《使用sql-research-assistant进行SQL数据库研究的实战指南(代码实现演示)》本文介绍了sql-research-assistant工具,该工具基于LangChain框架,集... 目录技术背景介绍核心原理解析代码实现演示安装和配置项目集成LangSmith 配置(可选)启动服务应用场景

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

golang内存对齐的项目实践

《golang内存对齐的项目实践》本文主要介绍了golang内存对齐的项目实践,内存对齐不仅有助于提高内存访问效率,还确保了与硬件接口的兼容性,是Go语言编程中不可忽视的重要优化手段,下面就来介绍一下... 目录一、结构体中的字段顺序与内存对齐二、内存对齐的原理与规则三、调整结构体字段顺序优化内存对齐四、内

SpringBoot中使用 ThreadLocal 进行多线程上下文管理及注意事项小结

《SpringBoot中使用ThreadLocal进行多线程上下文管理及注意事项小结》本文详细介绍了ThreadLocal的原理、使用场景和示例代码,并在SpringBoot中使用ThreadLo... 目录前言技术积累1.什么是 ThreadLocal2. ThreadLocal 的原理2.1 线程隔离2

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

配置springboot项目动静分离打包分离lib方式

《配置springboot项目动静分离打包分离lib方式》本文介绍了如何将SpringBoot工程中的静态资源和配置文件分离出来,以减少jar包大小,方便修改配置文件,通过在jar包同级目录创建co... 目录前言1、分离配置文件原理2、pom文件配置3、使用package命令打包4、总结前言默认情况下,

修改若依框架Token的过期时间问题

《修改若依框架Token的过期时间问题》本文介绍了如何修改若依框架中Token的过期时间,通过修改`application.yml`文件中的配置来实现,默认单位为分钟,希望此经验对大家有所帮助,也欢迎... 目录修改若依框架Token的过期时间修改Token的过期时间关闭Token的过期时js间总结修改若依