中科曙光 前端 一面面经：权限拦截、SSR 水合与事件循环

《面试题目》

1. 项目里的用户通过 URL 访问了没有权限的页面，是怎么处理的？
2. Vue Router 要是写拦截的话，应该在哪里写？
3. AI 占比多少？
4. 如果多人合作这个项目，你如何让别人开发的时候优先用你已经写好的、已经存在的组件？
5. Codex 一般先读什么文件？
6. SSR 有做吗？水合问题是什么原因？
7. 一个事件循环输出题（具体代码记不清了）
8. 为什么投郑州？

《参考解析》

1. 无权限 URL 的处理：前端拦截只做体验，权限必须由后端兜底：前端能做的按顺序是登录态判断 → 路由寻址前拦截 → 拿到用户角色与权限点 → 决定放行、跳登录还是给 403 页面。但要主动说明前端守卫可以被绕过，真正的边界在接口层的鉴权，后端必须对每个请求校验权限并返回 403。这题里面试官提到可以先用 Vue Router 判断，答的时候要把「两层都要有」补齐。

2. Vue Router 拦截写在全局前置守卫里：router.beforeEach 里读 to.meta 上标记的 requiresAuth 或角色要求，配合全局状态里的用户信息判断；需要异步拉取用户信息时在守卫里 await 后按规范放行。权限较多时用 addRoute 按权限动态注册路由，注意退出登录或权限变更时要清理已注册的路由，否则会出现换账号后还能进旧页面的问题。

3. 「AI 占比多少」「Codex 先读什么文件」考的是工作方法：要能分清哪些环节交给 AI——脚手架、样板代码、单测、读陌生代码、重构，哪些必须自己写——业务逻辑、边界处理、性能与安全相关代码。回答「先读什么文件」时别只说 README，而是说清项目的约定文件（技术栈与目录说明、编码规范、已有架构文档）与就近的同类实现，先让 AI 对齐上下文再动手，这本身就是会用工具的表现。

4. 让别人优先复用已有组件，靠机制不靠嘱咐：在根目录写一份开发规范只是第一步，落地还要有——清晰一致的目录与命名、组件的文档或示例页、可预览的组件库、把通用组件抽到共享包由所有人依赖、code review 时指出重复实现。只写规范没有入口和约束，同事还是会各写各的。

5. SSR 水合不匹配的常见原因：服务端渲染出的 HTML 与客户端首次渲染结果不一致，Vue 就会报 hydration mismatch 并退化。典型原因有：渲染依赖了时间、随机数、localStorage 等两端不同的值；在服务端执行了 window 等浏览器专属 API；结构依赖屏幕尺寸或浏览器对 HTML 的嵌套修正；两端拿到的数据不同步。排查思路是对比两端的首屏 HTML，把不确定的内容挪到 mounted 之后渲染。

6. 事件循环题按「同步 → 微任务 → 宏任务」列清单：先执行同步代码，遇到宏任务（setTimeout、setInterval、I/O）推进宏任务队列，遇到微任务（Promise.then、queueMicrotask、MutationObserver）推进微任务队列；每执行完一个宏任务就把微任务队列清空，再取下一个宏任务。async 函数里 await 之前的代码是同步的，await 之后的代码相当于挂在 then 上。答这种题不要凭直觉报顺序，把每个回调标上类别再排，会稳得多。