主题
高级项目实践面试题
Vue 项目如何实现动态路由权限，并处理刷新、退出和权限变更？
考察路由元信息、异步路由、权限模型和导航失败恢复。
适合阶段：高级 / 资深前端 · 二面到架构面核心能力：架构设计 · 工程落地 · 风险治理
面试官想考什么
- 能否先明确问题边界？
考察路由元信息、异步路由、权限模型和导航失败恢复。 - 能否讲清核心链路和状态变化？
重点考察：静态路由负责登录、错误和公共页面；动态路由由权限配置映射到组件，生成后注册；首次导航等待权限初始化，避免重复重定向。 - 能否说明取舍，而不是只给单一方案？
重点考察：前端动态路由主要改善导航体验，不是安全边界；把权限编码在前端会增加发布成本，完全由服务端返回又需要稳定的路由映射协议。 - 能否把方案落到项目治理？
重点考察：路由 meta 只存展示和策略标识，真实权限由统一 canAccess 判断；退出时移除动态路由、清空 store 和缓存，权限变化后重新计算菜单。
一句话回答
text
我会把路由可见性和服务端授权分开，登录后根据权限生成可访问路由，导航过程要能处理刷新重建、权限变化、无权限和失败回滚。面试回答详解
这道题的关键不是背一个 Vue API，而是把业务目标、状态边界、运行时链路和上线后的失败恢复放在同一个设计里。
1. 先拆问题和边界
考察路由元信息、异步路由、权限模型和导航失败恢复。 前端动态路由主要改善导航体验，不是安全边界；把权限编码在前端会增加发布成本，完全由服务端返回又需要稳定的路由映射协议。
2. 核心机制
静态路由负责登录、错误和公共页面；动态路由由权限配置映射到组件，生成后注册；首次导航等待权限初始化，避免重复重定向。
text
需求与约束 -> 状态/模块建模 -> Vue 组件与基础设施协作 -> 失败恢复 -> 指标验证3. 工程落地
路由 meta 只存展示和策略标识，真实权限由统一 canAccess 判断；退出时移除动态路由、清空 store 和缓存，权限变化后重新计算菜单。
- 契约：明确输入、输出、错误模型和生命周期，避免组件依赖隐式全局状态。
- 异常：为网络失败、权限变化、取消、重复操作和卸载分别设计行为。
- 验证：通过类型、单元/组件测试、E2E、性能指标和线上日志验证，而不是只看本地能否运行。
- 演进：把稳定能力沉淀为模块 API，把易变业务留在 feature 内，保留迁移和回滚路径。
4. 方案取舍
前端动态路由主要改善导航体验，不是安全边界；把权限编码在前端会增加发布成本，完全由服务端返回又需要稳定的路由映射协议。
不要把架构复杂度本身当成成熟度。高级答案应说明何时采用简单实现，何时值得引入抽象，以及抽象带来的调试、性能和团队认知成本。
5. 生产风险
路由 meta 只存展示和策略标识，真实权限由统一 canAccess 判断；退出时移除动态路由、清空 store 和缓存，权限变化后重新计算菜单。 还要补充数据隐私、权限校验、资源释放、兼容性、灰度发布和可观测性。前端可以改善用户体验，但不能替代服务端授权、数据一致性和安全校验。
可直接背诵的 30 秒回答
text
我会先把问题拆成目标、状态、模块边界和失败场景。我会把路由可见性和服务端授权分开，登录后根据权限生成可访问路由，导航过程要能处理刷新重建、权限变化、无权限和失败回滚。 实现上我会让 Vue 组件负责展示和交互，把请求、领域规则和基础设施隔离，通过明确契约连接；同时覆盖 loading、error、empty、取消、重复操作和卸载。最后用类型、测试、性能指标和线上监控验证方案，而不是只证明功能能跑。扩展知识
一个通用项目设计框架
text
业务目标 -> 领域边界 -> 状态所有权 -> 依赖方向 -> 异常恢复 -> 测试与观测 -> 灰度与回滚常见误区
- 把前端隐藏、路由拦截或 TypeScript 类型当成真正的安全边界。
- 只讲正常流程，不讲刷新、并发、取消、卸载、断网和版本不一致。
- 只看局部代码能否运行，不看模块耦合、性能、测试和发布成本。
- 引入抽象后没有公共契约、迁移路径和删除旧实现的计划。
面试官追问链
追问一：刷新页面为什么会丢失动态路由？
- 考察点：确认候选人是否能把方案落到生产边界。
- 回答方向：结合数据规模、失败恢复、可观测性和团队维护成本回答，不要只给 API 名称。
追问二：如何避免 beforeEach 无限重定向？
- 考察点：确认候选人是否能把方案落到生产边界。
- 回答方向：结合数据规模、失败恢复、可观测性和团队维护成本回答，不要只给 API 名称。
追问三：按钮权限和路由权限如何共享模型？
- 考察点：确认候选人是否能把方案落到生产边界。
- 回答方向：结合数据规模、失败恢复、可观测性和团队维护成本回答，不要只给 API 名称。