Tiger

# 子应用接入

# 主应用修改

# 1. 左侧导航

  • 如果左侧导航是根据权限树自动生成的，则只需要配置权限树即可，不需要修改代码
  • 如果左侧导航是手写的，那需要在代码里加上子应用的导航tab

# 2. 关联子应用

当前主应用关联子应用有两种方式：

  1. 通过微前端配置中心: 测试环境 (opens new window)、线上环境 (opens new window)
  2. 通过硬编码

如果采用方案1，那接新的子应用只需要添加关联即可。如果是硬编码的形式则需要修改 web/src/pages/ChildAppRoot/ChildAppRoot.tsx:

const ChildApp: React.FC = (props: any) => {
    const [configReady, setConfigReady] = useState<boolean>();

    。。。。

    useEffect(() => {
        const _config = {
            ...(AppConfig.config || {}),
            ...{ childAppPathList: ['/mf-umc', '/mf-admin'] }, // 这里需要加上新增的子应用的 contextPath
        };
        AppConfig.configure(_config);
        setConfigReady(true);
    }, []);

    。。。

};

# 配置

  1. 应用通过主应用+Apolloy方式集成：

修改主应用响应的Apolloy配置

测试环境配置示例：

key : mf.childApp.proxy

Value: 
[
    {
        "path": "/micro-fed/mf-admin/xhr/",
        "target": {
            "default": "http://127.0.0.1:8550/proxy/test.mf-admin.service.mailsaas"  // 目标地址根据环境而定
        }
    },
    {
        "path": "/micro-fed/mf-umc/xhr/",
        "target": {
            "default": "http://127.0.0.1:8550/proxy/test.mf-umc.service.mailsaas" // 目标地址根据环境而定
        }
    }
]

Apolloy地址：开发环境 (opens new window)/测试环境 (opens new window)/线上环境 (opens new window)

  1. 应用通过API网关方式集成：

需要申请API网关 (opens new window)

示例：