如何为多个React组件仅执行一次认证请求并复用令牌

要实现「仅在有ExternalContent组件渲染时请求一次令牌，且所有组件复用该令牌」的需求，推荐用全局Promise缓存+自定义Hook的方案，既保留逻辑内聚性，又避免不必要的重复请求或提前请求。

具体实现步骤 #

1. 全局缓存令牌请求Promise
   定义一个全局变量缓存令牌请求的Promise，确保多个组件同时挂载时只会发起一次请求，后续组件等待同一个Promise的结果：

   // 全局缓存令牌请求的Promise，防止重复请求
   let tokenFetchPromise = null;
   
   async function fetchTemporaryAuthToken() {
     if (!tokenFetchPromise) {
       tokenFetchPromise = fetch(EXTERNAL_SERVICE_AUTH_URL)
         .then(res => res.json())
         .then(data => data.token)
         .catch(err => {
           // 请求失败后重置Promise，允许后续重新发起请求
           tokenFetchPromise = null;
           throw err;
         });
     }
     return tokenFetchPromise;
   }
   

2. 封装自定义Hook
   将令牌获取逻辑封装成自定义Hook，让ExternalContent组件可以直接复用，保持组件内聚：

   import { useState, useEffect } from 'react';
   
   function useExternalAuthToken() {
     const [token, setToken] = useState(null);
     const [error, setError] = useState(null);
   
     useEffect(() => {
       fetchTemporaryAuthToken()
         .then(token => setToken(token))
         .catch(err => setError(err));
     }, []);
   
     return { token, error };
   }
   

3. 修改ExternalContent组件
   组件内部使用自定义Hook获取令牌，无需再单独处理请求逻辑：

   function ExternalContent(props) {
     const { token, error } = useExternalAuthToken();
   
     // 处理错误状态
     if (error) {
       return <div>加载外部内容失败：{error.message}</div>;
     }
   
     // 处理加载状态
     if (!token) {
       return <div>加载中...</div>;
     }
   
     return (
       <div>
         <iframe src={`${EXTERNAL_SERVICE_URL}${props.id}?token=${token}`} />
       </div>
     );
   }
   

方案优势 #

• 逻辑内聚：令牌获取的核心逻辑封装在自定义Hook和配套函数中，ExternalContent组件只需调用Hook，无需分散逻辑到父组件。
• 避免冗余请求：全局Promise确保只有第一个渲染的ExternalContent会发起请求，后续组件复用结果。
• 按需请求：只有当存在ExternalContent组件渲染时才会发起令牌请求，不会提前浪费资源。

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