前端token知识梳理:token如何存储?token过期如何处理?如何无感刷新token?

article/2025/6/29 6:24:10

在前后端是以token的形式交互,既然是token,那么肯定有它的过期时间(为了接口数据的安全,服务器的token一般不会设置太长,根据需要一般是1-7天的样子),没有一个token是永久的,永久的token就相当于一串永久的密码,是不安全的。

登录场景

在这里插入图片描述

那么既然token既然有过期时间,问题就来了

一、前后端交互的过程中token如何存储?

方法1:存在 cookie 中

cookie的大小约4k,兼容性在ie6及以上 都兼容,在浏览器和服务器间来回传递,因此它得在服务器的环境下运行,而且可以设定过期时间,默认的过期时间是session会话结束。

方法2:存在 localStorage 中

localStorage的大小约5M,兼容性在ie7及以上都兼容,有浏览器就可以,不需要在服务器的环境下运行, 会一直存在,除非手动清除 。

二、token过期时,前端该怎么处理?

方法1:跳回登陆页面重新登陆(不推荐)

在vue中我们可以在 axios 拦截器中这样写:

instance.interceptors.response.use(function (response) {// 对响应数据做点什么return response.data},function (error) {if (error.response) {if (error.response.status === 401) {Message.error('登陆过期请重新登陆!')setToken('')router.push({name: 'login'})}}}// 对响应错误做点什么return Promise.reject(error.response)}
)

方法2:重新获取token

出于本文的目的,我们将关注两种最常见的令牌类型:访问令牌和刷新令牌。

  • 访问令牌携带必要的信息以直接访问资源。换句话说,当客户端将访问令牌传递给管理资源的服务器时,该服务器可以使用令牌中包含的信息来决定客户端是否被授权。访问令牌通常具有到期日期并且是短暂的。
    在这里插入图片描述

  • 刷新令牌包含获取新访问令牌所需的信息。换句话说,每当访问令牌需要访问特定资源时,客户端可以使用刷新令牌来获得由认证服务器发布的新访问令牌。常见用例包括在旧的访问令牌过期后获取新访问令牌,或者首次访问新资源。刷新令牌也可以过期,但相当长寿。刷新令牌通常受到严格的存储要求,以确保它们不会泄露。
    在这里插入图片描述

总结: 服务器生成token的过程中,会有两个时间,一个是token失效时间,一个是token刷新时间。
刷新时间肯定比失效时间长,当用户的 token 过期时,你可以拿着过期的token去换取新的token,来保持用户的登陆状态,当然你这个过期token的过期时间必须在刷新时间之内,如果超出了刷新时间,那么返回的依旧是 401

所以要实现无痛刷新token,我们应该这样

  1. 在axios的拦截器中加入token刷新逻辑
  2. 当用户token过期时,去向服务器请求新的 token
  3. 把旧的token替换为新的token
  4. 然后继续用户当前的请求

在axios的拦截器中加入token刷新逻辑:

instance.interceptors.response.use(function (response) {// 对响应数据做点什么return response.data},function (error) {if (error.response) {if (error.response.status === 401) {// 如果当前路由不是login,并且用户有 “记住密码” 的操作// 那么去请求新 tokenif (router.currentRoute.name !== 'login') {if (getRemember() && getRefreshToken()) {return doRequest(error)} else {Message.error('登陆过期请重新登陆!')setToken('')router.push({name: 'login'})}}}}// 对响应错误做点什么return Promise.reject(error.response)}
)async function doRequest (error) {const data = await store.dispatch('refreshToken')let { token_type: tokenType, access_token: accessToken } = datalet token = tokenType + accessTokenlet config = error.response.configconfig.headers.Authorization = tokenconst res = await axios.request(config)return res
}// refreshToken 中重新设置了 token 和  refresh_token
commit('setToken', { token, expiresIn })
setRefreshToken(token, refreshTtl / (60 * 60 * 24))

总结

弄两个token,一个负责鉴权得token:access_token,一个负责刷新得token:refresh_token,
每次请求的时候都带上这两个token,后端拦截器判断,先判断鉴权access_token是否有效和过期,如果有效的话,就允许访问。如果过期了,就判断刷新refresh_token是否有效,如果有效,就返回指定状态码,然后让前端根据这个状态码去吊用刷新token接口。如果刷新token失效了,就提示需要重新登录!

https://juejin.cn/post/6854573219119104014#heading-9


http://chatgpt.dhexx.cn/article/xwlY5t7l.shtml

相关文章

token过期怎么办 无感刷新token

(1)可以通过响应拦截器或者全局前置守卫强制跳转登录页 // 全局前置守卫 router.beforeEach((to, from) > {let token sessionStorage.token;if (token) {return true} else {return { name: Login, query: { redirect: to.fullPath } };} }) // 添…

关于 Token 过期问题的两种解决方案

对于token过期,我们有两种方案: 方案一:当我们操作某个需要token作为请求头的接口时,返回的数据错误error.response.status 401,说明我们的token已经过期了。 我们希望当响应返回的数据是401身份过期时,让…

Latex 符号(Symbols)

Latex符号广泛用于数百个类别的不同主题中。对于数学或其他学科中使用的每个符号,将使用相应的命令。本主题将为您提供有关符号的详细概念和说明,以及以哪种方式可以使用所有符号。 使用标准文本,您可以使用任何符号。这种方法不仅节省了精力…

Latex特殊符号汇集

原文链接:https://blog.csdn.net/ying_xu/article/details/51240291 这段时间用Latex很多,常常需要查阅相关特殊的符号,这里做一个整理,也方便大家查阅。 摘自:《一份不太简短的LATEX2介绍》或112分钟学会LATEX2 原…

(13.1)Latex符号、公式及伪代码

文章目录 一、符号大全和小工具1、符号大全2、小工具(1)图片转Latex(2)在线Latex公式编辑 二、公式格式三、伪代码四、注意事项1、符号宏包2、颜色宏包3、换段未缩进4、单引号和双引号 一、符号大全和小工具 1、符号大全 Latex …

LaTex常见数学符号与示例

在写文档或者博客过程中,数学公式是最难表示的,比如根号,下标号,分号,还有绝对值的表示,复杂一些的比如矩阵的表示,积分的表示,求和公式。 LaTex提供了丰富的表示方法,用…

Latex数学符号对应表

Latex数学符号对应表 - 叮叮当当sunny - 博客园 目录 1. 希腊字母2. 运算符符号3. 关系符号4. 箭头符号5. 括号符号6. 其他符号7. MATLAB 回到顶部 1. 希腊字母 字母实现字母实现αα\alphaAA\Alphaββ\betaBB\Betaγγ\gammaΓΓ\Gammaδδ\deltaΔΔ\Deltaϵϵ\epsilon…

LateX各种命令符号

函数、符号及特殊字符 声调 语法效果语法效果语法效果\bar{x}\acute{\eta}\check{\alpha}\grave{\eta}\breve{a}\ddot{y}\dot{x}\hat{\alpha}\tilde{\iota} 函数 语法效果语法效果语法效果\sin\theta\cos\theta\tan\theta\arcsin\frac{L}{r}\arccos\frac{T}{r}\arctan\frac{L}{…

Latex特殊符号大全(高清)

Latex符号大全 转载内容供自己阅读 原文:Latex特殊符号大全(高清)

Latex常见符号对照表

摘要: Latex可以很方便的利用命令来生成各式各样的特殊符号. 这里根据官方的文档将这些常见符号列出, 以备查用. B.1 希伯来和希腊字母(Hebrew and Greek letters) 希伯来语: 希腊语: 数学表达式中常常用下面的这些符号, 分小写/大写 B.2 二元关系符(Binary relations) …

LaTeX最全的数学符号大全(更新中…… )

文章目录 1 基本字符常用数集字母字母加标表示希腊字母 2 四则运算运算符号等号比较范围 3 常用函数4 离散数学运算符5 集合集合表示集合操作集合关系 最后更新于2020/12/02 1 基本字符 常用数集字母 符号 LaTeX \LaTeX LATE​X符号说明示例 N \mathbb{N} N\mathbb{N}自然数集…

Latex所有常用数学符号吐血整理(包含大括号、等式对齐、矩阵)

果然是自己搞一个查起来会方便一些,最近天天写数学题解,全是公式 ~ 希腊字母: 字母名称国际音标大写字母小写字母字母名称国际音标大写字母小写字母alpha/lfə/Ααnu/nju:/Ννbeta/bi:tə/或 /beɪtə/Ββxi希腊 /ksi/;英美 …

LaTeX 符号命令大全

函数、符号及特殊字符 声调 语法效果语法效果语法效果\bar{x} \acute{\eta} \check{\alpha} \grave{\eta} \breve{a} \ddot{y} \dot{x} \hat{\alpha} \tilde{\iota} 函数 语法效果语法效果语法效果\sin\theta \cos\theta \tan\theta \arcsin\frac{L}{r} \arc…

LaTeX 各种命令,符号

转载下来用于学习。转自: https://blog.csdn.net/anxiaoxi45/article/details/39449445 函数、符号及特殊字符 声调 语法效果语法效果语法效果\bar{x}\acute{\eta}\check{\alpha}\grave{\eta}\breve{a}\ddot{y}\dot{x}\hat{\alpha}\tilde{\iota} 函数 语法效果语法效…

LaTeX符号大全-基于lshort-zh-cn

文章目录 1、几个注意事项2、文本/数学模式通用符号3、希腊字母4、二元关系符5、二元运算符6、巨算符7、数学重音符号8、箭头9、作为重音的箭头符号10、定界符11、用于行间公式的大定界符12、其他符号13、AMS希腊字母和希伯来字母14、AMS二元关系符15、AMS二元运算符16、AMS箭头…

【收藏向】LaTeX 符号大全

你想找的LaTeX符号,这里都有🥰 目录 一、希腊字母 二、古希腊字母 三、单目运算符 四、双目运算符 五、二进制运算符 六、集合符号 七、逻辑符号 八、几何符号 九、分隔符 十、箭头 十一、三角函数 一、希腊字母 二、古希腊字母 三、单目运算…

巡风探索

模块内容包括: ├─nascan │ │ NAScan.py # 网络资产信息抓取引擎 │ │ │ ├─lib │ │ cidr.py │ │ common.py 其他方法 │ │ icmp.py # ICMP发送类 │ │ log.py # 日志输出 │ │ mongo.py # 数据库连接 │ │ scan.…

基于循环神经网络的格兰杰因果网络重构

复杂网络建模的反问题是网络重构,获得节点之间的关系对于分析网络特性有着至关重要的作用。常用的网络重构方法有:1 相关性分析,2 压缩感知,3 动力学方程,4 因果分析,5 深度学习,6 概率图模型&a…

时序分析28 - 时序预测 格兰杰因果关系(中) python实践1

时序分析28 - 时序预测 - 格兰杰因果关系(中) Python 实践 1 上一篇文章我们介绍了格兰杰因果关系的基本概念、背景以及相关统计检验法。本篇文章我们使用Python编程实践一下。 实践1:股票价格数据之间的格兰杰因果关系 问题:苹果公司今天的股价是否…