Angular模块联邦加载remoteEntry.js时无法添加请求头求助

方案一：自定义RemoteEntry加载逻辑（推荐） #

@angular-architects/module-federation支持通过函数配置remote，你可以手动实现带Token的请求逻辑：

1. 在Shell应用的module-federation.config.ts中，替换原有的remote字符串配置为异步函数：

export const mfConfig: MfConfig = {
  name: 'shell',
  remotes: {
    // 替换成你的微前端应用名称和RemoteEntry地址
    remoteApp: async () => {
      // 从本地存储或认证服务获取Token
      const authToken = localStorage.getItem('auth_token');
      
      // 带Token请求RemoteEntry.js
      const response = await fetch('http://网关地址/remoteApp/remoteEntry.js', {
        headers: {
          'Authorization': `Bearer ${authToken}`
        }
      });
      
      // 将返回的脚本内容注入页面
      const scriptContent = await response.text();
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.textContent = scriptContent;
      document.head.appendChild(script);
      
      // 等待脚本加载完成后返回微前端的全局暴露对象
      await new Promise(resolve => script.onload = resolve);
      return window['remoteApp']; // 这里的名称要和微前端的name配置一致
    }
  },
  // 你的共享依赖配置...
  shared: {
    // ...
  }
};

2. 确保微前端应用的module-federation.config.ts中name字段和上述window['remoteApp']的名称完全一致。

方案二：全局拦截Fetch请求 #

如果模块联邦底层使用Fetch加载RemoteEntry，可以通过重写全局Fetch方法统一添加Token：

在Shell应用的main.ts中，Angular启动前添加以下代码：

// 保存原始Fetch方法
const originalFetch = window.fetch;

// 重写Fetch，拦截RemoteEntry请求
window.fetch = async (input: RequestInfo, init?: RequestInit) => {
  // 判断是否为RemoteEntry请求
  const isRemoteEntry = typeof input === 'string' && input.includes('remoteEntry.js');
  
  if (isRemoteEntry) {
    const authToken = localStorage.getItem('auth_token');
    // 合并原有请求头与Token
    init = {
      ...init,
      headers: {
        ...init?.headers,
        'Authorization': `Bearer ${authToken}`
      }
    };
  }
  
  return originalFetch(input, init);
};

// 启动Angular应用
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

注意事项 #

• Token的获取方式根据你的认证方案调整，比如从Cookie、localStorage或内存中的认证服务获取（若从服务获取，需确保在加载RemoteEntry前已完成认证初始化）。
• 测试时确认RemoteEntry的加载方式（Fetch或Script标签），不同版本的@angular-architects/module-federation可能有差异。
• 若网关对跨域有要求，需确保请求头Authorization被允许在跨域请求中携带。

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