继上篇

上篇 Vben Admin 集成 qiankun 微服务时使用者反馈了三个主要痛点：

1. 子应用鉴权使用主应用鉴权，当程序鉴权过期后子应用无法自动跳转到登录页面。
2. 主应用与子应用保持主题风格一致时主题切换不及时同步，导致体验碎片化。
3. 需要支持多个子应用动态加载，但配置方式繁琐且不易维护。

下面按步骤解决上述痛点，并给出完整代码示例。

. 主应用和子应用主题同步

从主应用来看，传递 props 与主题事件

在主应用的配置文件中通过 props 传递登录信息。并利用自定义事件同步主题：

/** 本地微服务架构配置 */
export default {
subApps:,token: '',},sandbox: { strictStyleIsolation: true },},],};怎么说呢，

在主应用的 index.ts 中实现 beforeLoad 钩子来注入 token 与 userInfo：

import { useAccessStore。useUserStore } from '@vben/stores';怎么说呢，import { registerMicroApps } from 'qiankun';import config from './config';const { subApps } = config;export async function registerApps {
try {
registerMicroApps(subApps。{
beforeLoad:,loader { console.log;},})，按理说，} catch { console.error;}
}

为了让子应用实时感知主题变更，在主布局文件中监听 preferences.me 并派发自定义事件：

import { preferences } from '@vben/preferences';watch(
=>,async => {
window.dispatchEvent(
new CustomEvent
);},{ immediate: true }
);

至于子应用。接收 props 与处理主题更新

在子应用的 main.ts 的 mount 函数里读取传入的 token、userInfo 并注册事件监听：

async function initApplication {
await initPreferences({
namespace,overrides,});}
async function initQianKun {
renderWithQiankun({
async mount {
const { container。token,userInfo } = props;怎么说呢，await initApplication;useUserStore.setUserInfo;useAccessStore.setAccessToken;
window.addEventListener;},bootstrap {},update {}。unmount {
window.removeEventListener;},})，}
function handleThemeUpdate {
const newPref = event.detail;if updatePreferences;不过，}

. 支持多个子应用动态加载

当子应用不是固定列表时可以从后台获取配置并转换为 qiankun 所需格式。

import type { MicroApp } from '#/api/apps/model';import { GetMicroApp } from '#/api/apps';import config from './config';let { subApps } = config;export async function registerApps {
try {
if {
const data = await GetMicroApp;// 从后端获取
subApps = data.map(app => ({
再看name，app.name,entry: app.entry,container: '#sub-container'。activeRule: app.activeRule,props:{userInfo:.token:''},sandbox:{strictStyleIsolation:true},}));}
registerMicroApps;} catch { console.error;}
}

User Pain Point: 当后端推送新的微前端模块时前端无需改动代码即可自动加载和挂载，提高了 性与运维效率。

& 展望

• 已解决鉴权失效导致跳转失败的问题；通过统一 token 注入和重定向到登录页实现无缝切换。
• 实现了主题风格同步，避免多窗口或多页面出现视觉不一致。
• 支持后台动态添加/删除微服务，实现真正意义上的插件化架构。
• 未来可进一步研究多页签切换时保持各个子页面状态，还有与 wujie 等其他微前端方案对比调整。