前言

在公司的微服务项目 OAuth2实现微服务的统一认证的背景下，前端调用/oauth/token接口认证，在认证成功会返回两个令牌access_token和refresh_token，出于安全考虑access_token时效相较refresh_token短很多（access_token默认12小时,refresh_token默认30天）。当access_token过期或者将要过期时，需要拿refresh_token去刷新获取新的access_token返回给客户端，但是为了客户良好的体验需要做到无感知刷新。

方案

方案一：
浏览器起一个定时轮询任务，每次在access_token过期之前刷新。

方案二：
请求时返回access_token过期的异常时，浏览器发出一次使用refresh_token换取access_token的请求，获取到新的access_token之后，重试因access_token过期而失败的请求。

方案比较：
第一种方案实现简单，但在access_token过期之前刷新，那些旧access_token依然能够有效访问，如果使用黑名单的方式限制这些就的access_token无疑是在浪费资源。

第二种方案是在access_token已经失效的情况下才去刷新便不会有上面的问题，但是它会多出来一次请求，而且实现起来考虑的问题相较下比较多，例如在token刷新阶段后面来的请求如何处理，等获取到新的access_token之后怎么重新重试这些请求。

总结：第一种方案实现简单；第二种方案更为严谨，过期续期不会造成已被刷掉的access_token还有效；总之两者都是可行方案，推荐第二种方案通过前后端的配合实现无感知刷新token实现JWT续期。

实现

我们是如何通过代码实现在access_token过期时使用refresh_token刷新续期，具体步骤如下：

1. 后端OAuth2设置

为了方便我们测试分别设置access_token和refresh_token的过期时间，因为默认的12小时和30天我们吃不消的；除此之外，还必须满足t(refresh_token) > 60s + t(access_token)的条件， refresh_token的时效大于access_token时效我们可以理解，那这个60s是怎么回事？我们设置access_token时效为1s、refresh_token为120s吧。这里access_token设置为1s，但是时效确是61s，分析如下：
**

1.为什么access_token比设定多了60s时效？
项目使用 nimbus-jose-jwt 这个JWT库，依赖 spring-security-oauth2-jose 这个jar包，找到JWT验证过期的方法JwtTimestampValidator#validate
image.png
基本上满足 Instant.now(this.clock).minus(this.clockSkew).isAfter(expiry) 就说明JWT过期了
now – 60s > expiry =转换=> now > expiry + 60s

这里把测试根据时间分为3个阶段：

  1. 0~61s：双token都没过期，正常请求过程。
  2. 61s~120s：access_token过期，再次请求会执行一次刷新请求。
  3. 120s+： refresh_token过期，神仙都救不了，重新登录。

**

2. 添加刷新令牌方法

设置了支持客户端刷新模式之后，在前端添加一个refreshToken方法，调用的接口和登录认证是同一个接口/oauth/token,只是参数授权方式grant_type的值由password切换到refresh_token，即密码模式切换到刷新模式，这个方法作用是在刷新token之后将新的token写入到localStorage覆盖旧的token。

令牌存储文件：auth.js

  1. // /utils/auth.js
  2. import storage from 'store'
  3. const tokenKey = 'LVJI_TOKEN'
  4. const accessTokenKey = 'LVJI_ACCESS_TOKEN'
  5. const refreshTokenKey = 'LVJI_REFRESH_TOKEN'
  7. export function setToken(token) {
  8.   const { accessToken, refreshToken} = token
  9.   return storage.set(tokenKey, {accessTokenKey:accessToken,refreshTokenKey:refreshToken})
  10. }
  12. export function getToken() {
  13.   return storage.get(tokenKey)
  14. }
  16. export function removeToken() {
  17.    return storage.remove(tokenKey)
  18. }
  19. export {
  20.     accessTokenKey,
  21.   refreshTokenKey
  22. }

用户数据存储模块：user.js

  1. // /src/store/modules/user.js
  2. import {login, logout, getInfo} from '@/api/user'
  3. import {getToken, setToken, removeToken} from '@/utils/auth'
  4. import router, {resetRouter} from '@/router'
  6. const state = {
  7.   token: getToken(),
  8.   name: '',
  9.   avatar: '',
  10.   introduction: '',
  11.   roles: []
  12. }
  14. const mutations = {
  15.   SET_TOKEN: (state, token) => {
  16.     state.token = token
  17.   },
  18.   SET_INTRODUCTION: (state, introduction) => {
  19.     state.introduction = introduction
  20.   },
  21.   SET_NAME: (state, name) => {
  22.     state.name = name
  23.   },
  24.   SET_AVATAR: (state, avatar) => {
  25.     state.avatar = avatar
  26.   },
  27.   SET_ROLES: (state, roles) => {
  28.     state.roles = roles
  29.   }
  30. }
  32. const actions = {
  33.   // 登录
  34.   login({commit}, userInfo) {
  35.     const {username, password} = userInfo
  36.     return new Promise((resolve, reject) => {
  37.       login({
  38.         username: username,
  39.         password: password,
  40.         grant_type: 'password',
  41.         client_id: 'lvji-admin',
  42.         client_secret: '123456'
  43.       }).then(response => {
  44.         const {accessToken, refreshToken} = response.data
  45.         commit('SET_TOKEN', token)
  46.         setToken({accessToken,refreshToken})
  48.         resolve()
  49.       }).catch(error => {
  50.         reject(error)
  51.       })
  52.     })
  53.   },
  54.   // 刷新token
  55.   refreshToken({commit}, refreshToken) {
  56.     commit('SET_TOKEN', undefined)
  57.     return new Promise((resolve, reject) => {
  58.       login({
  59.         grant_type: 'refresh_token',
  60.         refresh_token: refreshToken,
  61.         client_id: 'admin',
  62.         client_secret: '123456'
  63.       }).then(response => {
  64.         const {accessToken, refreshToken} = response.data
  65.         commit('SET_TOKEN', token)
  66.         setToken({accessToken,refreshToken})
  67.         resolve(token)
  68.       }).catch(error => {
  69.         reject(error)
  70.       })
  71.     })
  72.   },
  73.   // 获取用户信息
  74.   getInfo({commit, state}) {
  75.     return new Promise((resolve, reject) => {
  76.       getInfo(state.token).then(response => {
  77.         const {data} = response
  79.         if (!data) {
  80.           reject('Verification failed, please Login again.')
  81.         }
  83.         const {roles, name, avatar, introduction} = data
  85.         // roles must be a non-empty array
  86.         if (!roles || roles.length <= 0) {
  87.           reject('getInfo: roles must be a non-null array!')
  88.         }
  90.         commit('SET_ROLES', roles)
  91.         commit('SET_NAME', name)
  92.         commit('SET_AVATAR', avatar)
  93.         commit('SET_INTRODUCTION', introduction)
  94.         resolve(data)
  95.       }).catch(error => {
  96.         reject(error)
  97.       })
  98.     })
  99.   },
  101.   // 用户登出-跳转
  102.   logout({commit, state, dispatch}) {
  103.     return new Promise((resolve, reject) => {
  104.       logout(state.token).then(() => {
  105.         commit('SET_TOKEN', '')
  106.         commit('SET_ROLES', [])
  107.         removeToken()
  108.         resetRouter()
  110.         // reset visited views and cached views
  111.         // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
  112.         dispatch('tagsView/delAllViews', null, {root: true})
  114.         resolve()
  115.       }).catch(error => {
  116.         reject(error)
  117.       })
  118.     })
  119.   },
  121.   // 清除token
  122.   resetToken({commit}) {
  123.     return new Promise(resolve => {
  124.       commit('SET_TOKEN', '')
  125.       commit('SET_ROLES', [])
  126.       removeToken()
  127.       resolve()
  128.     })
  129.   }
  130. }
  132. export default {
  133.   namespaced: true,
  134.   state,
  135.   mutations,
  136.   actions
  137. }

请求库：request.js

  1. // /utils/request.js
  2. import axios from 'axios'
  3. import {MessageBox, Message} from 'element-ui'
  4. import store from '@/store'
  5. import {getToken, accessTokenKey, refreshTokenKey} from '@/utils/auth'
  7. //axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
  9. const service = axios.create({
  10.   baseURL: process.env.VUE_APP_BASE_API,
  11.   timeout: 50000
  12. })
  14. service.interceptors.request.use(
  15.   config => {
  16.     if (store.getters.token) { 
  17.       config.headers['Authorization'] = 'Bearer ' + getToken().accessTokenKey
  18.     }
  19.     return config
  20.   },
  21.   error => {
  22.     return Promise.reject(error)
  23.   }
  24. )
  26. let refreshing = false,// 正在刷新标识，避免重复刷新
  27.   waitQueue = [] // 请求等待队列
  29. service.interceptors.response.use(
  30.   response => {
  31.     const {code, msg, data} = response.data
  32.     if (code !== '00000') {
  33.       if (code === 'A0230') { // access_token过期 使用refresh_token换取access_token
  34.         const config = response.config
  35.         if (refreshing == false) {
  36.           refreshing = true
  37.           const refreshToken = getToken().refreshTokenKey
  38.           return store.dispatch('user/refreshToken', refreshToken).then((token) => {
  39.             config.headers['Authorization'] = 'Bearer ' + token
  40.             config.baseURL = '' // 请求重试时，url已包含baseURL
  41.             waitQueue.forEach(callback => callback(token)) // 已刷新token，所有队列中的请求重试
  42.             waitQueue = []
  43.             return service(config)
  44.           }).catch(() => { // refresh_token也过期，直接跳转登录页面重新登录
  45.             MessageBox.confirm('当前页面已失效，请重新登录', '确认退出', {
  46.               confirmButtonText: '重新登录',
  47.               cancelButtonText: '取消',
  48.               type: 'warning'
  49.             }).then(() => {
  50.               store.dispatch('user/resetToken').then(() => {
  51.                 location.reload()
  52.               })
  53.             })
  54.           }).finally(() => {
  55.             refreshing = false
  56.           })
  57.         } else {
  58.           // 正在刷新token，返回未执行resolve的Promise,刷新token执行回调
  59.           return new Promise((resolve => {
  60.             waitQueue.push((token) => {
  61.               config.headers['Authorization'] = 'Bearer ' + token
  62.               config.baseURL = '' // 请求重试时，url已包含baseURL
  63.               resolve(service(config))
  64.             })
  65.           }))
  66.         }
  67.       } else {
  68.         Message({
  69.           message: msg || '系统出错',
  70.           type: 'error',
  71.           duration: 5 * 1000
  72.         })
  73.       }
  74.     }
  75.     return {code, msg, data}
  76.   },
  77.   error => {
  78.     return Promise.reject(error)
  79.   }
  80. )
  81. export default service