电商平台开发笔记9.nuxt 基于访问Token和刷新Token的请求拦截器的封装

后端代码就不贴了，基于.NET5 webapi+jwt+swagger 实现的Token验证接口。

本文目的

探讨一下双Token验证设计思路以及Nuxt前端请求拦截器的封装方法。

所需插件

项目中使用到了cookie-universal-nuxt

gayhub地址：cookie-universal-nuxt

前言

nuxt请求拦截器的封装比vue的封装要复杂一些。

主要难点在于封装请求拦截的时候要对服务端渲染和客户端渲染区别对待。

当请求走的是服务端渲染时，token传递都是在请求头中进行的。

当请求走的是客户端渲染时，token传递是直接取本机cookie。

 

期间遇到的问题

1.当使用服务端渲染时应该使用什么容器来存放Token

2.当代码执行在服务端时，拿到了刷新成功的Token，如何传递给客户端代码

3.$cookies.set已经设置成了刷新后的Token，为什么在request里拿到的还是旧的过期的Token

4.当一个页面不止一个请求，并且同时包含服务端渲染和客户端渲染的请求时，该如何队列执行。

5.当页面不止一个请求，当第一个请求访问Token过期，并且进入刷新状态，如何处理后续请求。

 

最后

封装nuxt请求拦截器期间遇到了太多坑，无奈之下看了cookie-universal-nuxt和js-cookie的源码才成此文。

下面是请求拦截器代码，注释已经够详细了，代码测试环境和线上环境运行均无BUG。

/**
 * 请求拦截器
 * 名词解释
 *          accessToken:访问令牌
 *          refreshToken:刷新令牌
 * 设计方案：用户登录成功后服务端返回访问令牌和刷新令牌，访问令牌1分钟过期，刷新令牌1小时过期
 *          访问令牌过期后，重新把访问令牌和刷新令牌传递给接口，接口返回新的访问令牌和刷新令牌
 * 设计初衷：
 *          当用户停留在某个页面超过一小时未做任何操作，则会强制让用户重新登录
 *          当用户一直保持着对网页进行操作时，则能实现永久不需要退出而刷新Token
 */
export default ({ $cookies, store, redirect, $axios, req }) => {
  // 从全局导出类中加载RequestUrl作为$axios的baseURL
  $axios.defaults.baseURL = store.$GlobalHelper.GlobalRequestUrl
  $axios.defaults.timeout = 3000
  // 表示是否正在刷新Token
  // js中的节流阀,相当于线程锁
  // 当正在刷新Token时，后续所有继续发来的accessToken失效的请求都应该被缓存到数组requestsCache中，直到Token刷新结束再重发请求
  let isRefreshingTokenLock = false

  // 请求缓存数组
  // 用来存放正在刷新Token时，后续所有的请求
  let requestsCache = []

  // 拦截请求，将accessToken插入到请求头中
  $axios.onRequest((config) => {
    // 这里的get要注意
    // 如果代码在服务端执行，则是从req.headers里面拿Cookie
    // 如果代码在客户端执行，则是从本地拿Cookie
    // 所以在使用这句代码之前，一定要确保判断是在服务端还是客户端执行，并且确保拿到的cookie是最新的
    const accessToken = $cookies.get('accessToken')
    accessToken && (config.headers.Authorization = accessToken)
  })

  // 拦截返回，当accessToken过期，则利用refreshToken进行刷新，并且缓存所有accessToken失效的请求进行重发
  $axios.onResponse(async (response) => {
    // 如果响应的状态码不是401，代表accessToken并未失效，则直接将response成功结果返回
    if (response.data.status !== 401) { return Promise.resolve(response) }

    // 如果正在执行刷新Token操作
    if (isRefreshingTokenLock === true) {
      global.console.log('正在刷新Token')
      // 创建Promise的函数对象
      const promise = new Promise((resolve, reject) => {
        requestsCache.push((newCookie) => {
          resolve($axios(response.config))
        })
      })
      // 直接把异步对象返回，由于该对象还没有被执行resolve函数，所以调用方使用await等待的时会一直挂起，直到resolve被执行
      return promise
    }

    // 401表示请求过期,如果访问Token过期，则应该使用刷新Token去重新获取访问Token和刷新Token
    if (isRefreshingTokenLock === false) {
      // 设置节流阀，表示正在执行刷新Token
      isRefreshingTokenLock = true
      // 从req请求头或者本地cookie里获取Token
      const accessToken = $cookies.get('accessToken')
      const refreshToken = $cookies.get('refreshToken')
      // 如果请求令牌或刷新令牌不存则直接返回
      if (!accessToken || !refreshToken) {
        return Promise.resolve(response)
      }
      // 调用远程API刷新Token
      const object = { accessToken, refreshToken }
      const apiTokenResult = await $axios.post('/api/Token', object)
      // 123表示刷新Token失败，如果刷新失败，将刷新失败的结果返回
      if (apiTokenResult.data.status === 123) {
        return Promise.resolve(apiTokenResult)
      }

      // 将返回的新cookie保存到客户端
      // 因为如果不是ssr，$cookies.get是从本机拿cookie
      $cookies.set('accessToken', apiTokenResult.data.response.accessToken)
      $cookies.set('refreshToken', apiTokenResult.data.response.refreshToken)

      if (process.server) {
      // 将返回的新的cookie保存到req.headers
      // 因为如果是ssr，$cookies.get是从req.headers拿cookie
        const newCookie = 'accessToken=' + apiTokenResult.data.response.accessToken + ';' + 'refreshToken=' + apiTokenResult.data.response.refreshToken
        req.headers.cookie = newCookie
      }
      // 设置节流阀，表示刷新Token执行完成
      isRefreshingTokenLock = false
      global.console.log('令牌刷新成功')

      // 下面这一步最重要，这里是循环requestsCache数组，并且调用该数组中的所有函数
      // 当函数被调用时，就会执行resolve通知Promise执行成功，调用方的await才会继续执行
      requestsCache.forEach((value) => {
        value()
      })
      // 清空缓存
      requestsCache = []

      return $axios(response.config)
    }
  })
}