React-boilerplate服务层无法dispatch实现JWT令牌自动刷新问题

运行环境 #

本次开发基于经过大量生产实践验证的React-boilerplate脚手架实现。该脚手架功能体系完善，但未内置认证模块，需要自行实现与脚手架原有逻辑适配的自定义认证逻辑。

背景 #

项目已封装通用请求工具函数，逻辑为自动携带JWT认证请求头向服务端发送请求，最终返回响应结果。

实现目标 #

需要实现access token自动刷新逻辑：当使用已过期的access token发起请求时，在请求正式发送到服务端前自动完成access token刷新，再携带新令牌发起业务请求。

现存卡点 #

• 已编写处理access token刷新的saga逻辑，在容器组件内调用时运行完全正常，但服务层请求工具无法感知Redux store实例，无法直接dispatch action触发刷新流程
• React-boilerplate采用reducer、saga动态注入机制，在服务层直接注入认证相关的saga和reducer不符合框架设计规范，且saga、reducer注入器属于React副作用范畴，仅支持在React组件内部调用

该需求属于前端认证模块的常见基础功能，业内已有大量成熟实现，但常规方案大多违背Redux、Saga的设计初衷。卡点位置已在代码中标注，现有请求工具代码如下：

/**
 * 发起URL请求，返回Promise对象
 *
 * @param  {string} url       待请求的目标地址
 * @param  {object} [options] 传递给fetch方法的配置项
 *
 * @return {object}           响应数据
 */
export default function request( url, options ) {

    const token = makeSelectAccessToken();
    if (!token) throw new Error('No access token found.');

    // 令牌过期时先刷新access token
    if (new Date(token.expires) - Date.now() <= 0) {
      // TODO: 逻辑待补：请求继续执行前，先用refresh token换取新的access token
      /** dispatch(REFRESH_ACCESS_TOKEN) **/

      // 问题点：服务层拿不到store实例，无法dispatch action
      // 第二个难点：React-boilerplate的saga、reducer注入器是React侧副作用，无法在服务层调用完成注入
    }

  options = {
    ...options,
    Authorization: `Bearer ${token.token}`, // 请求头挂载JWT令牌
  };

  return fetch(url, options)
}

不需要打破React-boilerplate的动态注入设计，也不需要全局污染模块依赖，按以下步骤调整即可：

• 认证模块全局常驻注入
  在应用根组件App.js（整个应用生命周期内不会卸载的顶层组件）中注入认证相关的reducer和saga，不做按需动态注入。认证属于全局基础能力，本就应该在应用初始化阶段完成加载，不属于按页面拆分的业务逻辑，在此处注入完全符合设计规范。
• 导出store实例供基础服务调用
  在store创建入口文件（通常为configureStore.js）中，将初始化完成的store实例正常导出即可。Redux官方从未禁止在非组件模块导入store，仅不推荐业务代码随意导入导致依赖混乱；对于请求拦截、令牌刷新这类全局基础逻辑，导入store使用完全合理。
• 补全请求层刷新逻辑，增加并发锁防止重复刷新
  修改request工具函数逻辑处理令牌过期场景，注意多个请求同时触发过期时，避免重复发起刷新请求，参考实现如下：

// 全局刷新状态锁，防止并发场景重复发起刷新请求
let isRefreshing = false;
// 刷新过程中挂起的请求队列
let pendingRequests = [];

export default async function request( url, options ) {
  const token = makeSelectAccessToken(store.getState());
  if (!token) throw new Error('No access token found.');

  // 令牌过期优先处理刷新
  if (new Date(token.expires) - Date.now() <= 0) {
    if (!isRefreshing) {
      isRefreshing = true;
      // 直接导入已初始化的store实例，dispatch刷新动作
      store.dispatch({ type: REFRESH_ACCESS_TOKEN });
      // 等待令牌刷新完成
      await new Promise(resolve => {
        const unsubscribe = store.subscribe(() => {
          const newToken = makeSelectAccessToken(store.getState());
          // 检测到有效新令牌，判定刷新完成
          if (new Date(newToken.expires) - Date.now() > 0) {
            unsubscribe();
            resolve();
            // 执行队列中所有挂起的请求
            pendingRequests.forEach(cb => cb(newToken));
            pendingRequests = [];
            isRefreshing = false;
          }
        })
      })
    } else {
      // 已有刷新请求在执行，将当前请求加入等待队列
      return new Promise(resolve => {
        pendingRequests.push((newToken) => {
          const requestOptions = {
            ...options,
            headers: {
              ...(options.headers || {}),
              Authorization: `Bearer ${newToken.token}`,
            },
          };
          resolve(fetch(url, requestOptions));
        })
      })
    }
  }

  const validToken = makeSelectAccessToken(store.getState());
  const finalOptions = {
    ...options,
    headers: {
      ...(options.headers || {}),
      Authorization: `Bearer ${validToken.token}`,
    },
  };

  return fetch(url, finalOptions)
}

• 边界情况处理
  如果刷新令牌请求失败（如refresh token已过期），直接在刷新saga中触发登出逻辑，清空本地存储的令牌、跳转到登录页即可，无需在请求层额外处理。

内容的提问来源于stack exchange，提问作者Michael Seltenreich