登录状态管理需分离身份与权限，用pinia统一存储并持久化token、角色和权限码；登录后动态筛选注册路由，配合全局守卫校验角色、指令控制按钮显隐。
登录状态管理要支撑多角色用户的动态权限分配，核心是把“谁登录了”和“能干什么”拆开管，再用路由和UI层联动控制访问行为。重点不在存Token，而在让权限数据可计算、可过滤、可响应。
用户身份与权限数据统一存到 Pinia
用 Pinia 创建一个 userStore，集中管理 token、角色列表（roles）、权限码集合（permissions）等关键字段。必须配合 pinia-plugin-persistedstate 插件，让这些数据在页面刷新后不丢失。角色字段建议用数组形式存储，比如 ['admin', 'editor']，方便后续做包含判断；权限码如果后端返回的是字符串数组（如 ['user:read', 'order:edit']），也原样存入，避免额外转换引入歧义。
登录后立即拉取并过滤动态路由
用户输入账号密码成功登录后，前端应立刻请求一个「用户权限信息接口」，该接口返回角色、菜单结构或权限列表。拿到数据后，不要手动拼接路由对象，而是从预定义的 asyncRoutes 全量路由表中，按 meta.roles 字段筛选出当前用户可访问的子集，再逐条调用 router.addRoute() 注册。注意：首次注册完需手动调用 router.replace(to.fullPath) 触发一次重定向，否则可能出现白屏或路由不匹配问题。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
路由守卫里做实时权限校验
在 router.beforeEach 中加两层判断：第一层检查是否已登录（token 是否存在）；第二层检查目标路由是否标注了 meta.roles，若标注，则验证当前用户角色是否满足任一条件。不满足就跳转到 /403 页面。这个逻辑必须写在登录态验证之后，且不能依赖组件内守卫——全局前置守卫才是唯一可靠的拦截点。
按钮和菜单用指令+状态驱动显隐
菜单栏直接遍历已注册的动态路由生成，天然具备权限过滤效果；按钮级控制则用自定义指令 v-permission，接收权限码字符串（如 "user:delete"），内部读取 userStore 中的 permissions 数组，用 .includes() 判断是否显示。避免在模板里写一堆 v-if="userStore.permissions.includes('xxx')"，既重复又难维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
