token无感知刷新方案你了解嘛？

熱心网友
147 阅读2分钟

本文已参与『新人创作礼』活动，一起开启掘金创作之路

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情

1. 简介

开发中为了安全或满足分布式场景，通常会舍弃原有的session认证手段，而采用jwt(json web token)；但是使用token难免遇到token有效期的问题，如果token长期有效，服务端不断发布新的token，导致有效的token越来越多，这必然是存在安全问题的。而token不想session一样，在用户操作时会进行刷新，为了用户体验，这个刷新就需要自己实现。

2. 方案

2.1 定时器

如果采取单个token的方式要实现token的自动刷新，就必须使用定时器，每隔一段时间自动刷新token，并且这个时候token一定要是没有过期的，因为如果已经过期的token也可以用来刷新，这和长期有效的token也没什么不同。但这种方式存在一定的问题：

劣势:

  1. 为了保证同一时间，账户只被单个用户登录，后端必然要保证一个账户的多个token只有一个生效，最简单的方式就是使用分布式缓存中间件如redis，而存在并发请求时，可能前一个请求带着的是旧token，此时又到了刷新token的时间，就会产生请求的token与服务端存储的token不一致的问题
  2. 使用定时器是增加了性能的损耗，不是最佳的手段

2.2 无感刷新

在请求响应拦截器中拦截，判断token是否失效 返回过期后，调用刷新token接口。替换最新token即可

实战案例：

import axios from 'axios'
 
service.interceptors.response.use(
  response => {
    if (response.data.code === 409) {
        return refreshToken({ refreshToken: localStorage.getItem('refreshToken'), token: getToken() }).then(res => {
          const { token } = res.data
          setToken(token)
          response.headers.Authorization = `${token}`
        }).catch(err => {
          removeToken()
          router.push('/login')
          return Promise.reject(err)
        })
    }
    return response && response.data
  },
  (error) => {
    Message.error(error.response.data.msg)
    return Promise.reject(error)
  }
)

2.3 同时发起两个或者两个以上的请求时，怎么刷新token。

当发生多次请求,token正在还未请求回来，我们可以用Promise方法，将请求存进队列中/或可以用到async/await解决同异步方案返回的也是Promise方法，让这个Promise一直处于pending状态（即不调用resolve），此时这个请求就会一直等啊等，只要我们不执行resolve，这个请求就会一直在等待。当刷新请求的接口返回来后，我们再调用resolve，逐个重试。

文章有错误或者遗漏地方的小伙伴可以在评论区评论哦~

avatar
文章
阅读
粉丝