DaLuoComponents

Appearance

扩展：接入第二个子应用并跨应用返回 ​

前提：完成前三章的 order 应用。本章再接入 report:7102，使用其现有 /list、/detail 演示页验证跨应用 navigateTo 和 back 来源链。

1. 创建并启动 report ​

在 micro-lab 中执行，与第一章使用同一个已发布版本：

sh
npx @axewo/fin-micro@latest create report-app --template vue --layout standard --app-id report --port 7102
cd report-app
npm install
npm run check:runtime
npm run dev

本章只在基座里使用 report 的内存演示页。需要独立登录和业务 API 时，按第二章为 report 配置代理、auto/Cookie 配置和 CSRF 认证适配器，并在开发 CORS 的精确来源列表中补充 http://localhost:7102（教学 API 的 allowedOrigins 已预留此来源）。

2. 同时登记代码入口和后台授权 ​

在 my-host/src/configs/microApps.ts 的 microApps 数组里，保留 order 项，新增：

ts
{ appId: 'report', name: '报表应用', entry: 'http://localhost:7102', shareToken: true },

这是自己维护的可信 report；不需要共享宿主认证的应用应保留 false 并自行接认证。

在教学 API 文件中，把 APP_IDS 改为：

js
const APP_IDS = ['order', 'report']

重启 API、重启基座，退出后重新登录。教学 API 会返回两个授权 appId，以及分别使用 order:list/report:list 的“业务列表 / 报表列表”菜单。先从基座打开“报表列表”，确认目标应用本身能加载，再配置跨应用跳转。

只在本地注册而后台没有授权，或者只返回后台 appId 而本地没有注册，都不能完成接入。

3. 配置跨应用方向白名单 ​

在生成项目 my-host/src/layout/HostLayout.vue 中找到已有 host 配置，保留原 canOpen、capabilities 和 crossAppBack，将 canNavigate: () => false 替换为下一段。它同时限制来源应用与目标应用，目标 route/tabId 仍必须经过原 canOpenRoute。

ts
canNavigate: (context, target) =>
  context.tab.appId === context.appId &&
  ((context.appId === 'order' && target.appId === 'report') ||
   (context.appId === 'report' && target.appId === 'order')),
crossAppBack: true,

文件中原本已有 crossAppBack:true，只保留一份。standard/custom 两种生成布局的配置位置相同。

4. 在订单列表中发起跳转 ​

第三章列表组件已经在 setup 创建 sdk。向其 script setup 加入：

ts
async function openReport(): Promise<void> {
  if (!sdk) { message.value = '请在基座中打开跨应用报表'; return }
  try {
    const result = await sdk.navigateTo({
      appId: 'report',
      tabId: 'report:detail:1001',
      title: '关联报表 1001',
      route: '/detail?id=1001',
    })
    if (result.status !== 'committed' && result.status !== 'noop') message.value = `导航未完成：${result.status}`
  } catch (error) { message.value = toSafeError(error).message }
}

在列表 section 内添加按钮：

vue
<el-button @click="openReport">打开关联报表</el-button>

这里必须使用 navigateTo；openTab 不开放跨应用目标。report 模板详情仍要求 demo:read，教学身份保留了该权限。

5. 验证来源返回 ​

从订单列表点击“打开关联报表”，应保留订单列表并新增 report 详情页签。点击 report 详情里的“返回来源”，应关闭 report 详情并回到 order 列表。这里的来源由宿主记录，目标页面不需要自己保存来源 URL。

如果来源页签已关闭，会沿来源链查找仍然存活的来源；不会自动重建已关闭页签。找不到来源时使用已配置的 fallback，否则沿核心关闭回退规则选择存活页签。显式 sdk.back(target) 则优先去指定目标，不再优先回来源。完整状态和边界见功能页面关闭。

独立打开 report 不存在跨应用宿主，按钮应提供明确提示或使用自己的业务入口，不伪造 bridge。部署第二个应用时按第四章配置它自己的静态资源 base、entry 和服务端路径。