请描述在 Vue 应用中设计权限管理体系的完整方案，并具体说明如何实现按钮级别的细粒度权限控制？

回答思路

1. 【回答框架 1】权限管理通常分为路由权限、菜单权限和按钮权限三个层级。路由权限通过路由守卫（如 beforeEach）结合用户角色或权限码动态添加或过滤路由表实现；菜单权限根据权限数据动态渲染侧边栏；按钮权限则通过自定义指令（如 v-permission）或封装权限判断函数的方式进行控制，核心思路是在按钮渲染前检查当前用户是否拥有对应权限码。
2. 【回答框架 2】具体实现时，前端需在登录后获取用户角色和权限码列表（如 permissions 数组），并存储于全局状态（Vuex/Pinia）或本地存储。对于动态路由，采用 addRoute 方法添加用户有权限访问的页面；对于按钮级控制，可注册全局指令 v-permission，当绑定值与用户权限列表不匹配时移除该按钮的 DOM 元素，或者结合条件渲染 v-if 来控制按钮的显示与隐藏。
3. 【回答框架 3】还需考虑权限码的细分粒度，例如按钮可能对应多个操作码，应支持数组形式的校验逻辑；同时要注意异步加载权限数据的时序问题，避免在守卫中使用未初始化的状态，可采取先请求权限再初始化应用（如使用 await 或 Promise 链）的方式，确保权限检查的可靠性与一致性。
4. 【关键点 1】权限分级：路由、菜单、按钮三个层面，各自独立又相互关联。
5. 【关键点 2】路由权限使用动态 addRoute 和全局守卫 beforeEach 控制访问。
6. 【关键点 3】按钮权限用自定义指令 v-permission 或 v-if 结合权限码数组实现。
7. 【关键点 4】权限数据需持久化存储并同步到全局状态，且注意异步加载时机。
8. 【易错点 1】仅靠前端控制安全性不足，需配合后端接口校验，前端隐藏按钮不等于权限隔离。
9. 【易错点 2】权限码硬编码在组件中导致维护困难，应抽取为常量或统一管理。
10. 【易错点 3】忽略路由动态添加后的 404 处理，可能导致刷新白屏或跳转异常，需在守卫中正确判断路由是否存在。