如何在单个网站中运行多个独立的Blazor WASM应用？

以下是针对你同域名下多Blazor应用场景的可落地方案，按优先级排序：

1. 同源本地存储+事件监听方案 #

这是成本最低的通用方案，完全适配同域名不同路径的应用场景：

• 核心逻辑：所有应用同源，可共享localStorage/sessionStorage，同时通过浏览器原生storage事件实现状态变更的实时通知
• 实现步骤：
  1. 主站登录成功后，将非敏感的用户信息、认证标记加密后存入localStorage
  2. 所有子应用初始化时，直接读取localStorage里的全局状态完成初始化
  3. 所有应用都监听window的storage事件，只要存储内容发生变化，所有打开的应用都会收到通知，同步更新自身状态
• 注意事项：敏感认证信息优先存在HttpOnly Cookie中，避免前端存储被篡改窃取

2. 后端共享状态方案 #

适合对数据一致性、安全性要求高的场景：

• 核心逻辑：所有应用共用同一套后端认证服务，所有全局状态以后端为准
• 实现步骤：
  1. 登录态存在同域名的HttpOnly Cookie中，请求时会自动携带到后端，不需要前端手动传递
  2. 每个Blazor应用初始化时，统一调用后端的/api/user/status接口拉取当前登录状态、权限信息
  3. 如果需要实时同步，可以对接后端SSE（Server Sent Events）服务，状态变更时后端主动推送给所有在线的应用实例
• 优势：完全避免前端数据篡改风险，状态一致性由后端保证

3. 全局自定义事件方案 #

适合传递临时性操作事件的场景，比如主站导航栏点击购物车要唤起shop应用的购物车弹窗：

• 核心逻辑：所有Blazor应用都运行在同一个顶级window上下文下，可以通过自定义DOM事件实现跨应用通信
• 代码示例：
  主站触发事件：

  window.dispatchEvent(new CustomEvent('toggleCart', { detail: { visible: true } }))
  

  shop子应用监听事件：

  window.addEventListener('toggleCart', (e) => {
    // 触发Blazor内的购物车显隐逻辑
    DotNet.invokeMethodAsync('ShopApp', 'ToggleCart', e.detail.visible);
  })
  

• 注意事项：事件名建议加统一前缀避免命名冲突，组件销毁时要同步移除事件监听避免内存泄漏

4. 全局共享状态宿主方案 #

适合多应用业务联动多、需要共享大量状态的场景：

• 核心逻辑：在主站的宿主HTML中定义全局状态对象window.appGlobalState，所有子应用都直接读写这个对象的属性，同时通过Proxy实现属性变更的响应式通知，订阅了对应状态的应用会自动收到更新通知

推荐优先使用「本地存储+事件监听」+「后端共享认证状态」的组合方案，90%以上的场景都能覆盖，改造成本极低，稳定性也有保障。

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