@lute-root/wujie-adapter

wujie 微前端子应用接入适配层，封装 bus 通信、环境检测、token 获取等通用逻辑。

新子应用接入 ERP 父应用时，只需安装此包，即可替代原来需要手动复制的 micro-bridge.ts 及相关逻辑。

安装

pnpm add @lute-root/wujie-adapter

快速接入

1. 类型声明（src/vite-env.d.ts）

/// <reference types="@lute-root/wujie-adapter/types" />

2. 初始化（src/main.ts）

import { setupWujie } from '@lute-root/wujie-adapter';

// ⚠️ 必须在 app.mount() 之后调用
app.mount('#app');
setupWujie(router);

3. axios 拦截器（src/config/axios/index.ts）

import { getToken, emitUnauthorized, isInWujie } from '@lute-root/wujie-adapter';

// token 获取
function getRequestToken(): string | undefined {
  if (isInWujie()) {
    return getToken() ?? getCookieToken();
  }
  return getCookieToken();
}

// 401 / token 失效处理
function handleUnauthorized(): void {
  emitUnauthorized(() => {
    // 独立运行模式 fallback
    wsCache.clear();
    removeCookieToken();
    goLogin();
  });
}

4. swagger ApiClient 拦截器（src/api/index.ts）

import { getToken, isInWujie } from '@lute-root/wujie-adapter';

const token = isInWujie() ? (getToken() ?? getCookieToken()) : getCookieToken();
if (token) {
  config.headers.Authorization = `Bearer ${token}`;
}

5. 路由配置（src/router/index.ts）

import { isInWujie } from '@lute-root/wujie-adapter';

const routes = isInWujie()
  ? bizRoutes  // wujie 模式：平铺结构，Host 已提供 layout
  : [
      { path: '/login', component: LoginPage },
      { path: '/', component: Layout, children: bizRoutes },
    ];

return createRouter({
  history: createWebHistory(
    isInWujie()
      ? new URL(window.__WUJIE_PUBLIC_PATH__ ?? '/').pathname
      : '/'
  ),
  routes,
});

API

setupWujie(router, options?)

一键初始化 wujie 接入，内部完成：

• wujie 环境：body.position = 'relative'（修复 popper.js 定位偏移）
• wujie 环境：注册 NAV_ROUTE_CHANGE / NAV_NAVIGATE_BY_NAME bus 监听
• wujie 环境：router.afterEach 发 NAV_OPEN_TAB 通知 Host 同步路径
• wujie 环境：发 SUB_APP_READY 通知 Host 子应用就绪
• 独立模式：动态插入 iconfont <link> 标签

| 参数 | 类型 | 说明 | |---|---|---| | router | Router | Vue Router 实例 | | options.iconfontUrls | string[] | 独立运行时加载的 iconfont URL，默认内置路特三个 CDN 地址 |

isInWujie()

判断当前是否运行在 wujie 子应用环境中。

getToken()

从 Host bridge 获取当前登录 Token，非 wujie 环境返回 null。

getUser()

从 Host bridge 获取当前登录用户信息。

emitUnauthorized(fallback?)

触发 token 失效处理。wujie 环境通知 Host 统一登出，独立模式执行 fallback。

MicroEvent

bus 事件名常量，与 Host 侧保持一致：

| 常量 | 值 | 方向 | 说明 | |---|---|---|---| | AUTH_TOKEN_CHANGED | auth:token-changed | Host → 子应用 | Token 刷新通知 | | AUTH_UNAUTHORIZED | auth:unauthorized | 子应用 → Host | token 失效，通知登出 | | NAV_OPEN_TAB | nav:open-tab | 子应用 → Host | 路由跳转完成，同步路径 | | NAV_ROUTE_CHANGE | nav:route-change | Host → 子应用 | Tab 切换，通知跳路由 | | NAV_NAVIGATE_BY_NAME | nav:navigate-by-name | Host → 子应用 | 菜单点击，按 componentName 跳转 | | SUB_APP_READY | sub-app:ready | 子应用 → Host | bus 监听就绪通知 |

注意事项

• setupWujie() 必须在 app.mount() 之后调用，否则会打印警告且 router.afterEach 可能丢失首次路由事件
• 子应用路由路径前缀（如 /finance/）必须与 Host 壳路由前缀一致
• 子应用的 devServer.port 需与 Host 侧 MICRO_APP_ENTRIES 配置对应

版本历史

0.1.0

• 初始版本，封装 MicroEvent、isInWujie、getToken、getUser、emitUnauthorized、setupWujie