⌈本文是作者学习过程中的笔记总结，若文中有不正确或需要补充的地方，欢迎在评论区中留言⌋🤖

一、【实现思路】🚩

小程序端登录时，除了返回用户信息，还需返回两个 token 信息
- accessToken：用于验证用户身份
- refreshToken：用于刷新 accessToken
当请求返回状态码为401（即 accessToken 过期）时，使用 refreshToken 发起刷新请求
刷新成功会拿到新的 accessToken 和 refreshToken
然后使用新的 accessToken 将失败的请求重新发送

👉具体实现可以翻阅作者的上一篇文章：【微信小程序】token 无感刷新
👉实现思路中的后三步，微信小程序中是在请求的 success 回调函数中做的处理，Taro 中则是设置了响应拦截器，在拦截器中做的对应处理，本文仅讨论有区别的这部分。

二、【前端代码】🚩

1. ⌈封装的请求方法⌋🍥

接收5个参数：url、method、params、needToken、header（点击展开）
- url: 请求地址，是部分地址（例如：/auth/login），后面处理时会将其与设置的 baseUrl（例如：http://localhost:4000/api/v1）进行拼接
- method：请求方法，默认值为 'GET'
- params：请求参数，数据格式为 object，例如： {name: 'test'}
- needToken：是否需要需要携带 token（即是否需要身份验证），默认值为 false
- header：请求头信息，数据格式为 object（例如： {'Content-Type': 'application/json'}），默认值为 null

需要携带 token 的请求，先从本地存储中取出 accessToken 信息，然后将其赋值给 header 中的 Authorization 属性（注意：首字母要大写）。后端接口在验证 token 时，会根据 req.headers.authorization.split(' ')[1] 获取到请求头中传递的 accessToken 信息
先通过 Taro.addInterceptor 设置拦截器，然后调用 Taro.request 发送请求。这样的话，当请求真正发送之前以及获取到响应信息时，都会先进入到拦截器中，我们就是在这里进行的 token 刷新操作

具体代码（点击展开）

javascript 复制代码

import Taro from '@tarojs/taro'
import { baseUrl } from '../config'
import responseInterceptor from '../http/interceptors'

// 添加拦截器
Taro.addInterceptor(responseInterceptor)

// 封装的请求方法
const request = (url, method = 'GET', params = {}, needToken = false, header = null) => {
  const {contentType = 'application/json'} = header || {}
  if (url.indexOf(baseUrl) === -1) url = baseUrl + url

  const option = {
    url,
    method,
    data: method === 'GET' ? {} : params,
    header: {'Content-Type': contentType}
  }

  // 处理 token
  if (needToken) {
    const token = Taro.getStorageSync('accessToken')

    if (token) {
      option['header']['Authorization'] = token
    } else {
      Taro.setStorageSync('profile', null)
      Taro.showToast({
        title: '请登录',
        icon: 'error',
        duration: 2000
      })

      return
    }
  }

  // 发起请求
  return Taro.request(option)
}

export default request

2. ⌈拦截器⌋🍥

拦截器是一个函数，接受 chain 对象作为参数。chain 对象中含有 requestParams 属性，代表请求参数。拦截器最后需要调用 chain.proceed(requestParams) 以调用下一个拦截器或者发起请求。Taro 中的这个拦截器没有请求拦截器和响应拦截器之分，具体看你是在调用 chain.proceed(requestParams) 之前还是之后做的操作。具体说明可查阅官方文档

拦截器中先调用 chain.proceed(requestParams) 发送请求，其返回的是一个 promise 对象，所以可以在 .then 中做响应处理
.then 中先判断响应状态码，这里我们只讨论 401 token 过期的情况
当 token 过期时，获取本地存储的 refreshToken，然后调用对应后端接口刷新 token（点击展开）
- 在刷新请求发送前，需要先判断是否已经有刷新请求被发送且正在处理中（基于 isTokenRefreshing 标识）
- 如果有，则不必再重复发送刷新请求，但是需要把本次因为 401 token 过期而导致失败的请求存起来（放入 failedRequests 数组中），等待当前正在处理的 token 刷新请求完成后，使用新的 accessToken 重新发送本次请求
- 如果没有，则发送刷新请求，同时修改 isTokenRefreshing 标识的值为 true

等待刷新请求完成，将返回的新 accessToken 和 refreshToken 存储起来
然后将 failedRequests 中因为等待 token 刷新而存储起来的失败请求，基于新的 accessToken 重新发送
最后将本次因为 401 token过期导致失败的请求，基于新的 accessToken 重新发送（点击展开）
- 本次操作正常进行 token 刷新请求，说明本次请求也是 token 过期了，而且因为 isTokenRefreshing 标识为 false, 没有将本次失败的请求存入 failedRequests 中