微前端接入全局 AI 助手：上下文隔离与生命周期回收
微前端接入全局 AI 助手：上下文隔离与生命周期回收
全局 AI 助手跨越多个子应用时，真正麻烦的是事件订阅和上下文归属。路由切换后若旧连接没有释放，就会重复消费消息。本文用主应用代理、命名空间和销毁钩子把生命周期说清楚。
1. 产生工程落差的四大破坏点
为什么在单体应用里好端端的 AI 助手，放在微前端架构里就会惨烈翻车？
- Window 假沙箱逃逸（Sandbox Escape）：像 qiankun 的
ProxySandbox虽然能拦截子应用对window全局变量的修改，但如果大模型的 SDK 将 EventSource、WebSocket 实例或 Global Event Listener 挂载到了基座top window上，子应用卸载时沙箱无法自动清理这些长连接。 - AI 上下文污染（Context Pollution）：为了让 AI 识别当前页面业务，子应用通常需要在全局 State 中注册
currentBusinessContext。如果子应用卸载前没有严格执行 unmount 清理逻辑，切换到新子应用后，大模型依然带着旧子应用的敏感业务数据发起 Prompt 查询。 - CSS 沙箱穿透（Style Contamination）：AI Copilot 侧边栏通常挂载在基座 DOM 节点中（为了跨子应用保持显示）。当某些子应用使用了带有污染性的全局 CSS（如
button { box-sizing: content-box; }）且未开启 Shadow DOM 隔离时，AI 侧边栏的 UI 结构会被直接插烂。
2. 架构设计：主应用代理 + 隔离总线 + 生命周期防线
为了解决微前端与 AI 能力集成的冲突，不能允许各个子应用私自由连接大模型 Gateway。可以重构为“主应用单例代理 + 确定性 Event Bus 桥接 + 强制生命周期卸载” 的治理架构。
该架构三大收口原则：
- 单例收口：子应用不允许直接实例化大模型长连接，应通过主应用暴露的
EventBus进行订阅； - Shadow DOM 隔离：AI Copilot 侧边栏使用 Shadow DOM 或 CSS Modules 强行隔离，避免子应用样式污染；
- 生命周期强契约：在微前端
unmount生命周期中，强制触发上下文清空与未完成请求的abort()截断。
3. 核心实现：微前端全局 AI Context 隔离总线
以下是使用 TypeScript 实现的微前端 AI 上下文安全总线与长连接管理器代码：
export interface BusinessContext { appId: string; pageRoute: string; payload: Record<string, any>; } export class MicroAiBridge { private static instance: MicroAiBridge; private currentContext: BusinessContext | null = null; private activeController: AbortController | null = null; private listeners: Set<(data: string) => void> = new Set(); private constructor() { // 监听微前端路由切换事件，作为兜底二次防护 window.addEventListener('single-spa:before-routing-event', () => { this.handleRouteShutdown(); }); } public static getInstance(): MicroAiBridge { if (!MicroAiBridge.instance) { MicroAiBridge.instance = new MicroAiBridge(); } return MicroAiBridge.instance; } /** * 子应用 mount 时注册业务上下文 */ public registerContext(context: BusinessContext): void { console.log(`[Micro AI Bridge] 子应用 [${context.appId}] 已成功挂载 AI 上下文`); this.currentContext = context; } /** * 子应用 unmount 或切换路由时，强制注销与中断连接 */ public unregisterContext(appId: string): void { if (this.currentContext?.appId === appId) { console.log(`[Micro AI Bridge] 检测到子应用 [${appId}] 卸载，强制清空上下文与中断长连接`); this.handleRouteShutdown(); } } /** * 强行中断当前未完成的大模型请求与上下文 */ private handleRouteShutdown(): void { if (this.activeController) { this.activeController.abort(); // 阻断 SSE 流传输 this.activeController = null; console.warn('[Micro AI Bridge] 动态切页，未完成的 AI 请求已强行 Abort 截断'); } this.currentContext = null; this.listeners.clear(); } /** * 统一由主应用发起的带上下文 AI 流式调用 */ public async requestAiStream( userPrompt: string, onChunk: (chunk: string) => void ): Promise<void> { // 如果没有子应用上下文，拒绝盲目请求 if (!this.currentContext) { console.warn('[Micro AI Bridge] 当前无有效子应用上下文，拒绝发起 AI 请求'); return; } // 挂载新的 AbortController this.activeController = new AbortController(); try { const response = await fetch('/api/ai/v1/stream', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt: userPrompt, context: this.currentContext // 附带安全的当前子应用上下文 }), signal: this.activeController.signal }); if (!response.body) return; const reader = response.body.getReader(); const decoder = new TextDecoder(); while (true) { const { done, value } = await reader.read(); if (done) break; const chunk = decoder.decode(value, { stream: true }); onChunk(chunk); } } catch (err: any) { if (err.name === 'AbortError') { console.log('[Micro AI Bridge] 流式请求已正常响应 Abort 中断信号'); } else { console.error('[Micro AI Bridge] 流式请求异常:', err); } } finally { this.activeController = null; } } }4. 用同一组故障注入验证生命周期边界
准备固定路由、提问和样式污染用例，分别测试未设置隔离策略与加入隔离策略的版本：
| 验证维度 | 注入方式 | 观察指标 | 通过条件 |
|---|---|---|---|
| 子应用切换 | 按固定序列反复挂载与卸载 | 活跃监听器、SSE 连接和内存 | 卸载后资源回到基线区间 |
| 跨子应用 AI 提问 | 在订单与 CRM 路由间切换提问 | 请求携带的应用 ID 与上下文 | 每次只携带当前应用上下文 |
| UI 样式隔离 | 子应用注入同名全局选择器 | 主应用关键组件快照 | 主应用样式不受该选择器影响 |
| Gateway 负载 | 重放相同请求序列 | QPS、P99、连接数和错误率 | 不越过事先定义的服务预算 |
5. 总结
在微前端这种高度复杂的解耦架构中落座 AI 智能化能力，不能被简易 Demo 带来的表象所欺骗。
将 HTTP/SSE 连接、DOM 隔离和上下文清理放在职责明确的生命周期管理层。子应用执行unmount后，用自动化断言检查监听器、连接和上下文是否释放，不能只依赖约定。