微前端中跨子应用路由守卫需主应用统一拦截+子应用协同配合：主应用接管跳转、校验权限与加载状态；子应用仅做细粒度路由鉴权并信任主应用传入的状态。
在微前端架构中，Vue 路由守卫不能直接跨子应用生效——因为每个子应用（如基于 Vue 的子项目）通常拥有独立的 Vue Router 实例和生命周期，彼此隔离。真正的“跨应用路由拦截”不是靠单个 beforeEach 完成的，而是需要主应用统一调度 + 子应用协同配合。核心思路是：**权限与跳转逻辑上收至主应用，子应用只做轻量级校验与状态同步**。
主应用统一拦截：路由变更前做全局决策
主应用（如 qiankun 主框架或自研基座）应接管所有路由跳转入口，例如：
- 用户点击菜单、输入 URL、调用
history.pushState等行为，都先由主应用的路由守卫捕获 - 主应用根据目标路径匹配对应子应用，并检查：该子应用是否已加载、当前用户是否有权访问该子应用、目标子路由是否属于白名单
- 若权限不足或子应用未就绪，主应用直接拦截并跳转至登录页/403页，不触发子应用的任何守卫
子应用配合：不重复鉴权，只响应主应用指令
子应用内部的 router.beforeEach 不再承担登录判断，而应聚焦于：
HISUI 前端框架开发指南（IRIS版）
下载
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
-
接收主应用透传的状态：例如主应用通过 props 或全局事件（如
window.__MICRO_APP_ENVIRONMENT__）下发userRole、token、activeApp等上下文 -
校验自身路由的细粒度权限：比如某子应用内 /admin/config 页面需管理员角色，此时才用
to.meta.requiresRole === 'admin'结合主应用传来的角色做判断 -
避免 localStorage/token 冗余读取：子应用应信任主应用提供的认证状态，不自行调用
localStorage.getItem('token')做二次校验（防止状态不一致）
参数与状态不丢失的关键设计
用户从子应用 A 的 /a/detail?id=123 被拦截后登录，再返回原页面——这个“原页面”信息必须完整保留在主应用层：
- 主应用在跳转到登录页前，将
to.fullPath（含 query、hash、params）存入sessionStorage或主应用 Pinia store - 登录成功后，主应用读取该路径，先激活对应子应用，再通过
loadMicroApp的props或自定义事件通知子应用“请导航到 /a/detail?id=123” - 子应用收到后，用
router.push()主动跳转，而非依赖浏览器历史还原（微前端中 history 可能被截断）
避免常见陷阱
以下做法会破坏微前端的隔离性与可靠性：
- 子应用自己监听
hashchange或popstate并调用router.push—— 主应用无法感知，可能造成路由错乱 - 子应用在
beforeEach中发起异步权限请求（如fetch('/api/permission')），导致白屏或竞态问题 —— 应由主应用在挂载前预加载权限 - 多个子应用都注册了
router.afterEach埋点，但未区分来源，导致统计口径混乱 —— 主应用应统一收集埋点，子应用只上报业务维度数据
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
