token的原理及过期处理

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。

处理流程：

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