权限变更后需重新拉取菜单接口、清空并重载动态路由、刷新侧边栏组件，再配合路由守卫校验，确保菜单与权限实时一致。
登录状态管理本身不直接更新侧边栏菜单，关键在于权限变更后，要触发菜单数据的重新获取、路由的动态重载、以及菜单组件的响应式刷新。整个过程需配合状态管理、路由控制和组件渲染三者协同，不是单点修改就能生效。
权限变更时必须重新拉取菜单接口
用户角色切换（如管理员降级为编辑）、权限调整（后台改了某角色的菜单权限）或 token 刷新后权限可能变化，此时不能复用旧菜单缓存。必须主动调用菜单权限接口（例如 /api/user/menu），拿到最新结构化菜单数据（含 name、path、icon、children 等字段）。该接口返回的数据应与前端路由配置逻辑对齐，确保后续能正确映射为路由对象。
- 建议在权限变更事件（如用户主动切换角色、收到权限更新通知、token 续期成功后）中显式触发请求
- 避免仅依赖 localStorage 中旧菜单，除非明确加了版本号或时间戳校验
- 接口返回空数组或 403 时，应清空当前菜单并跳转到无权限页（如 /403）
动态路由需先清空再注入，避免重复或残留
Vue Router 的 addRoute 是追加式添加，不会自动覆盖或删除已有动态路由。若权限变更后直接 addRoute，旧的受限路由仍保留在内存中，可能导致点击失效菜单仍可跳转、守卫误判等问题。正确做法是：先调用 router.getRoutes() 过滤出所有动态注册的路由（可通过 meta 字段标记，如 meta.isDynamic: true），再逐个用 router.removeRoute(name) 清除；之后再将新菜单转换为合法路由配置，批量调用 addRoute 注入。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 推荐封装一个 resetAsyncRoutes() 工具函数，统一处理清空+注入逻辑
- 转换菜单为路由时，注意嵌套路由 children 的 path 必须为相对路径，且父级要有 name 或唯一 path 用于 addRoute
- 注入完成后，建议调用 router.replace({ path: router.currentRoute.value.path }) 触发一次路由刷新，确保守卫和高亮同步
侧边栏组件需响应式监听菜单数据变化
菜单数据通常存在 Pinia store（如 useMenuStore）中，侧边栏组件（如 Layout.vue 中的
- 菜单数据结构建议扁平化或树形统一，避免在模板中做复杂递归渲染逻辑
- 使用 :default-active="route.path" 绑定当前路由路径，保证刷新后仍高亮正确项
- 折叠/展开状态可单独存于 layout store 中，与菜单数据解耦，避免因菜单重置丢失交互状态
配合路由守卫做兜底校验
即使菜单已更新，用户仍可能手动输入旧路径访问已被移除的页面。因此全局前置守卫 router.beforeEach 中，需检查目标路由是否存在于当前已注册的路由表中（router.hasRoute(to.name) 或比对 to.meta.authCode 是否在用户权限列表内）。若不匹配，强制重定向至首页或 403 页面，实现“有菜单才可进”的闭环。
- 守卫中不要仅依赖 store.roles，而应结合已注册的路由实例判断，更可靠
- 对 /login、/404 等静态路由保持白名单放行，避免拦截导致无法登录
- 错误重定向前可加 ElMessage.warning 提示“权限已变更，请刷新页面”，提升体验
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
