Token 是用户登录成功之后服务端返回的一个身份令牌,在项目中的多个业务中需要使用到:
-
访问需要授权的 API 接口
-
校验页面的访问权限
-
...
但是我们只有在第一次用户登录成功之后才能拿到 Token。
所以为了能在其它模块中获取到 Token 数据,我们需要把它存储到一个公共的位置,方便随时取用。
往哪儿存?
-
本地存储
-
获取麻烦
-
数据不是响应式
-
-
Vuex 容器(推荐)
-
获取方便
-
响应式的
-
-
登录成功,将 Token 存储到 Vuex 容器中
-
获取方便
-
响应式
-
-
为了持久化,还需要把 Token 放到本地存储
-
持久化
-
关于 Token 过期问题
登录成功之后后端会返回两个 Token:
-
token
:访问令牌,有效期2小时 -
refresh_token
:刷新令牌,有效期14天,用于访问令牌过期之后重新获取新的访问令牌
项目接口中设定的 Token
有效期是 2 小时
,超过有效期服务端会返回 401
表示 Token 无效或过期了。
为什么过期时间这么短?
-
为了安全,例如 Token 被别人盗用
过期了怎么办?
-
让用户重新登录,用户体验太差了
-
使用
refresh_token
解决token
过期
概述:服务器生成token的过程中,会有两个时间,一个是token失效时间,一个是token刷新时间,刷新时间肯定比失效时间长,当用户的 token
过期时,你可以拿着过期的token去换取新的token,来保持用户的登陆状态,当然你这个过期token的过期时间必须在刷新时间之内,如果超出了刷新时间,那么返回的依旧是 401。
处理流程:
-
在axios的拦截器中加入token刷新逻辑
-
当用户token过期时,去向服务器请求新的 token
-
把旧的token替换为新的token
-
然后继续用户当前的请求