Vue中token过期后，如何高效刷新并保持用户登录状态？

本文共计1828个文字，预计阅读时间需要8分钟。

目录+解决方案+方案一+方案二+方案三：封装axios基本结构+1. token存储在localStorage中+2. 遇到问题和优化+3. 完整版+后端为安全，token一般存在有效时间，过期后所有请求失效+解决方案

目录

• 解决方案
• 方案一
• 方案二
• 方案三：封装axios基本结构
• 1、token是存在localStorage中
• 2、问题和优化
• 3、完整版

后端为了安全，token一般存在有效时间，当token过期，所有请求失效

解决方案

方案一

在请求发起前拦截每个请求，判断token的有效时间是否已经过期，若已过期，则将请求挂起，先刷新token后再继续请求。

• 优点： 在请求前拦截，能节省请求，省流量
• 缺点： 需要后端额外提供一个token过期时间的字段；使用了本地时间判断，若本地时间被篡改，特别是本地时间比服务器时间慢时，拦截会失败
• 使用方法：axios.interceptors.request.use() 这个请求前拦截方法

方案二

根据拦截返回后的数据判断，若token过期，先刷新token，再进行一次请求。