JWT Token过期的时候自动刷新

JWT JS Vue

字数统计: 740阅读时长: 3 min

 2021/05/27   Share

前言

在使用JWT进行认证的时候, 后端返回的Token一般为两个.

access Token
refresh Token

其中access Token 过期时间很快, 默认只有5分钟, 而 refresh Token 则比较长. 所以，当Token过期的时候, 我们可以用refresh Token 去获取最新的 access Token.

思路很简单, 我们只需要在响应拦截器中去判断Token过期的代码，随后在请求最新的Token，并且拿到新Token以后, 我们重新在请求一遍源请求,返回不就行了吗？

自动判断Token过期,并且刷新

思路

让我们在理清一下步骤

如果响应拦截器中获取Token过期的状态
拿refresh Token去请求刷新Token的接口
拿到最新的Token重新请求接口
返回数据

代码我就不放了, 但是实现以后发现了一个小问题. 如果在Token过期的时候，同时发出来很多个请求, 那么refresh Token 也会被刷新多次, 那这样是完全没必要的。

观察者模式

上面的逻辑实现起来没什么问题, 但是refresh Token 也会被刷新多次, 有没有方法可以解决这个呢？

场景：当token失效时，多个请求同时发送请求。
问题：token会被多次刷新，除了第一次判断token失效后，进行刷新token的操作，其余的刷新token都是多余的。
解决：采用observer模式，请求为subject，token刷新为observer。监听token刷新后，通知收集到的每一个请求。多个请求中的第一个请求发送时，发现token失效，将当前请求以及后续的请求入队到队列，当token刷新后，将队列里的请求按顺序执行。

service.interceptors.response.use(
  async response => {
    const res = response.data

    if (res.code === 50008) {
      // Token 已经过期
      console.log(isRefreshing)
      if (!isRefreshing) {
        isRefreshing = true
        // 等待store.dispatch('user/getToken')调用成功
        const token = await store.dispatch('user/getToken')
        if (token) {
          // 依次执行队列中的resolve
          requestsQueue.forEach(rqs => rqs())
        }
        requestsQueue = []
        // eslint-disable-next-line
        isRefreshing = false
      }

      // 返回一个Promise, 并且将请求配置封装到 resolve 中。
      return new Promise(resolve => {
        requestsQueue.push(() => { resolve(service(response.config)) })
      })
    }

    // if the custom code is not 200, it is judged as an error.
    if (res.code !== 200 && res.code !== 50008) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Token expired; 50012: Other clients logged in; 50014: Illegal token;
      if (res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

参考文档

原文作者：Momo

原文链接：https://mo.xmomo521.top/2021/05/27/JWT-Token过期的时候自动刷新/

发表日期：May 27th 2021, 2:57:25 pm

更新日期：December 21st 2021, 3:32:58 pm

Next Post

手把手教你将vue-admin-template的路由改造为后端动态路由
Previous Post

Vue watch监听(数组或者对象)

CATALOG

1. 前言
2. 自动判断Token过期,并且刷新
1. 2.1. 思路
2. 2.2. 观察者模式
3. 参考文档

