微前端子应用之间怎么安全地传递数据？

第一步先说结论：子应用之间通信，qiankun 官方不推荐直接通信，但实际开发中完全可以用更合理的方式，关键在于解耦 + 明确边界 + 避免全局状态污染。你用 globalState 的方式本身没问题，问题在于把它当成了“通用消息总线”，这确实容易乱。

你现在的写法：

子应用 A 调 setGlobalState({ triggerRefresh: Date.now() })
子应用 B 监听 onGlobalStateChange 做刷新

看起来简单，但几个隐患：

1. 所有子应用都直接操作全局状态，没人知道是谁改的、为什么改，后期维护时谁改了状态得翻 git log
2. triggerRefresh 这种字段名太泛，容易和其他子应用冲突，比如子应用 C 也用 triggerRefresh，但触发的是另一件事
3. 如果多个子应用都监听，状态变化时可能重复触发，或者顺序混乱

更合理的做法，分三种场景说：

场景一：子应用 A 主动触发，子应用 B 被动响应（单向通知）
这种适合用 postMessage + 自定义事件，完全绕过 qiankun 的全局状态，直接 DOM 层通信，安全又轻量。

原理：微前端沙箱环境下，子应用都在同一个主应用的 window 下运行，但彼此 DOM 隔离。主应用的 #subapp-viewport 容器是所有子应用的挂载点，可以在这个容器上挂自定义事件，子应用监听它。

比如子应用 A 要通知“刷新用户列表”：

// 子应用 A（发送方）

const viewport = document.querySelector('#subapp-viewport');

if (viewport) {

  viewport.dispatchEvent(new CustomEvent('subapp:refresh-user-list', {

    detail: { userId: 123, reason: 'profile-updated' }

  }));

}

子应用 B（接收方）：

// 子应用 B（接收方）——建议在 bootstrap 或 mount 阶段绑定

let refreshHandler = null;



function initRefreshListener() {

  const viewport = document.querySelector('#subapp-viewport');

  if (!viewport) return;



  refreshHandler = (event) => {

    // 防止其他子应用也监听了这个事件，先校验来源

    if (event.detail?.reason !== 'profile-updated') return;



    // 你的刷新逻辑

    doRefreshUserList(event.detail.userId);

  };



  viewport.addEventListener('subapp:refresh-user-list', refreshHandler);

}



function destroyRefreshListener() {

  const viewport = document.querySelector('#subapp-viewport');

  if (viewport && refreshHandler) {

    viewport.removeEventListener('subapp:refresh-user-list', refreshHandler);

  }

}



// qiankun 子应用生命周期里用起来

export async function mount(props) {

  initRefreshListener();

  // ...其他初始化逻辑

}



export async function unmount() {

  destroyRefreshListener();

  // ...清理逻辑

}

优点：

- 不污染 globalState，状态不串门
- 事件名加前缀 subapp:，避免和浏览器原生事件冲突
- detail 里可以传结构化数据，比纯键值对更安全
- 子应用 B 可以在 unmount 时卸载监听，避免内存泄漏

场景二：需要“查询”而不是“通知”（比如子应用 A 想知道子应用 B 的当前状态）
这种别用 globalState 传值，应该用 props 或主应用中转请求，比如：

- 主应用维护一个“服务注册表”（简单点就用对象缓存）
- 子应用在 mount 时把自己暴露的方法挂到 window 上（加命名空间）
- 子应用 A 通过 props.microAppApi?.getXXX 调用（推荐）

但更推荐主应用提供一个“微服务网关”对象，比如：

// 主应用中

const microServices = {

  app2: {

    refreshUserList: (userId) => {

      // 找到 app2 的挂载容器，触发它的事件，或者直接调用它的公开方法

      const app2MountPoint = document.querySelector('#subapp-viewport [data-name="app2"]');

      if (app2MountPoint) {

        app2MountPoint.dispatchEvent(

          new CustomEvent('app2:refresh-user', { detail: { userId } })

        );

      }

    }

  }

};



// 注册子应用时传进去

registerMicroApps([

  {

    name: 'app1',

    entry: '//localhost:8081',

    container: '#subapp-viewport',

    props: { microServices }

  },

  {

    name: 'app2',

    entry: '//localhost:8082',

    container: '#subapp-viewport',

    props: { microServices }

  }

]);

子应用 A 中：

// 子应用 A（通过 props 拿到网关）

export async function mount(props) {

  const { microServices } = props;

  // 想触发 app2 刷新

  microServices.app2.refreshUserList(123);

}

这样所有跨应用调用都走主应用中转，但中转的是“意图”而不是“状态”，主应用不处理业务逻辑，只做路由，清晰多了。

场景三：你坚持要用 globalState，怎么用才不乱？

如果你觉得上面都麻烦，还是想用 globalState，那至少遵守三条：

1. 所有字段名加前缀，比如 { 'app1:triggerRefresh': true }
2. 每个子应用只写自己的字段，读别人的字段（比如 app2 只读 app1:*，写 app2:*）
3. 用完立刻清理，别留脏数据

比如：

// 子应用 A：发送方

const { setGlobalState } = getGlobalState();

setGlobalState({

  'app1:refresh-trigger': {

    target: 'app2',

    listType: 'user',

    timestamp: Date.now()

  }

});

// 子应用 B：监听方

onGlobalStateChange((state) => {

  const trigger = state['app1:refresh-trigger'];

  if (trigger && trigger.target === 'app2' && trigger.listType === 'user') {

    doRefresh();

    // 重要：消费后清掉，避免重复触发

    setGlobalState({ 'app1:refresh-trigger': null });

  }

});

但说实话，这种写法还是比不上 postMessage 直观，而且 globalState 是个“热汤”，谁都能搅，一不小心就烫手。

最后说句实在话：微前端通信难，本质上是因为我们试图让两个独立应用“亲密无间”，但它们本该是“松耦合”的。能用事件通知就别传状态，能用 props 传就别全局读写。qiankun 给你 globalState 是应急用的，不是日常饭碗。

你试试 postMessage + 自定义事件那套，代码量不比现在多，维护起来至少不会半夜被“谁改了 globalState”这种问题叫醒。

你这个问题其实很常见，qiankun 的 globalState 确实能用，但别把所有状态都塞进去，只传必要信号就行，比如用一个简单事件名加时间戳或 ID，别传完整对象。子应用 B 监听时加个防抖或校验来源名，避免误触发。

主应用注册时加个 id 标识：
registerMicroApps([
{ name: 'app1', entry: '//localhost:8081', container: '#subapp-viewport', props: { id: 'app1' } },
{ name: 'app2', entry: '//localhost:8082', container: '#subapp-viewport', props: { id: 'app2' } }
]);

子应用 A 发信号：
const { setGlobalState } = getGlobalState();
setGlobalState({ type: 'REFRESH_LIST', payload: { id: 'xxx' }, ts: Date.now() });

子应用 B 监听：
onGlobalStateChange((state) => {
if (state.type === 'REFRESH_LIST' && state.payload?.id === 'xxx') {
doRefresh();
}
});

或者更狠一点，直接用自定义事件，跨 iframe 也能用：
// A 中
window.dispatchEvent(new CustomEvent('refresh-list', { detail: { id: 'xxx' } }));

// B 中
window.addEventListener('refresh-list', (e) => {
if (e.detail?.id === 'xxx') doRefresh();
});

两个方案都行，看你们团队习惯，globalState 适合轻量同步，自定义事件更解耦。别搞复杂了，就传个信号，别传整个 state。