Henry's Log.

搜索文章

前端面试 P081：StrictMode 的检查与版本边界JavaScript 函数传参：值传递与对象引用前端面试 P018：手写柯里化与参数个数边界前端面试 P010：普通函数、箭头函数与 this前端面试 P088：Immer 草稿与结构共享前端面试 P006：对象遍历与属性键的选择前端面试 P009：执行上下文、调用栈与词法作用域前端面试 P094：SSE 分片解码与事件边界前端面试 P097：请求并发池、任务启动与失败释放前端面试 P076：Fiber 的协作调度与不可中断边界前端面试 P013：节流、防抖与取消待执行任务前端面试 P033：Object.create、描述符与共享属性前端面试 P057：Vue Router 配置、历史模式与导航前端面试 P030：构造函数与 new 的返回规则前端面试 P077：key、组件身份与状态重置前端面试 P039：同源策略、CORS 与请求是否发出前端面试 P032：instanceof、原型链与自定义判断前端面试 P047：Proxy 与 Vue 2 属性拦截的区别前端面试 P019：函数组合与同步数据管道前端面试 P004：手写深拷贝、循环引用与实现边界前端面试 P059：导航守卫、顺序与权限边界前端面试 P083：函数式更新、队列与纯度前端面试 P014：call、apply、bind 与模拟实现边界前端面试 P012：高阶函数、柯里化与部分应用前端面试 P041：事件委托、目标匹配与 React 事件前端面试 P048：track、trigger、动态依赖与清理前端面试 P066：自定义指令与 DOM 资源清理前端面试 P075：props 只读、状态归属与派生数据前端面试 P062：Pinia 创建、实例范围与使用前端面试 P073：JSX 编译、React 元素与表达式前端面试 P026：Promise 延迟与顺序任务队列前端面试 P016：纯函数、副作用与参数共享前端面试 P094：流式文本的 SSE 与 WebSocket 取舍前端面试 P064：storeToRefs 与 action 解构纠错前端面试 P044：Composition API 与组合式函数前端面试 P051：副作用清理与过期请求前端面试 P021：事件循环、微任务与渲染机会前端面试 P003：原始值、对象共享与赋值行为前端面试 P098：用户偏好存储、TTL 与命名空间前端面试 P056：插槽作用域与 slot props前端面试 P011：闭包、变量绑定与循环回调前端面试 P027：async 错误处理与 return await前端面试 P036：CSP、nonce 与防护边界前端面试 P007：隐式转换、ToPrimitive 与空数组比较前端面试 P035：继承方式对照与寄生组合式继承前端面试 P025：手写 Promise 的最小状态机前端面试 P079：受控表单与非受控输入前端面试 P072：虚拟 DOM 的价值与性能边界前端面试 P005：数组方法、可变性与回调副作用前端面试 P100：Proxy 沙箱为何不是安全边界前端面试 P040：发布订阅、事件总线与退订前端面试 P053：props、组件事件与 v-model 约定前端面试 P008：相等比较、NaN 与 Object.is前端面试 P065：Pinia 最小变更与对象替换的取舍前端面试 P087：Redux 单向数据流与状态边界前端面试 P002：数据类型与 typeof 的陷阱前端面试 P085：useReducer 与 useState 的实际取舍前端面试 P078：React 合成事件与旧事件池纠错前端面试 P025：Promise 解析过程与实现验收前端面试 P043：Vue 渐进式与声明式 UI前端面试 P091：SWR、TanStack Query 与服务端缓存前端面试 P074：函数组件快照与类实例的输出纠错前端面试 P071：UI 是状态映射与渲染纯度前端面试 P054：provide、inject 与跨层级依赖前端面试 P061：何时引入全局状态管理前端面试 P097：请求去重、缓存键与过期策略前端面试 P086：Context 拆分与订阅更新边界前端面试 P024：Promise 并发组合与空输入边界前端面试 P089：Redux middleware、next 与异步返回值前端面试 P022：Promise 状态、链式调用与错误传播前端面试 P084：状态提升、单一来源与范围选择前端面试 P034：class、super 与语法糖的边界前端面试 P058：路由参数、query 与组件 props前端面试 P020：定时器延迟、轮询重叠与清理前端面试 P029：对象原型、prototype 与属性查找前端面试 P095：AI SDK、编排框架与生成 UI 工具前端面试 P092：Signals、细粒度依赖与 React 集成边界前端面试 P046：Vue 响应式陷阱与 ref 自动解包纠错前端面试 P090：Zustand、Jotai 与状态作用域前端面试 P100：微前端 JS 隔离方案与资源生命周期前端面试课程：学习目录与纠错记录前端面试 P023：async、await、异步恢复与并发前端面试 P068：Vue 2 与 Vue 3 的列表 diff 区别前端面试 P015：IIFE、作用域隔离与现代模块前端面试 P063：Pinia 状态、getter 与 action前端面试 P052：Vue 条件、列表与表单指令前端面试 P050：Vue 生命周期、DOM 时机与 SSR前端面试 P060：路由 meta、合并与界面配置前端面试 P045：ref、reactive、computed 与 watch前端面试 P096：令牌无感刷新、重试与安全边界前端面试 P093：MCP 架构与前端集成场景前端面试 P080：组合、children 与自定义 Hook前端面试 P082：useState 更新请求、快照与批处理前端面试 P067：Vue 模板编译与运行时边界前端面试 P031：手写 new 与 Reflect.construct 的区别前端面试 P069：nextTick 等待 DOM 刷新与绘制的区别前端面试 P055：默认插槽、具名插槽与内容接口前端面试 P038：嵌套定时器的最小延迟与调度选择前端面试 P099：倒计时截止时间、漂移与完成事件前端面试 P019：记忆化缓存与递归调用的纠错前端面试 P049：Vue 与 React 的更新范围和批处理前端面试 P004：浅拷贝、深拷贝与 structuredClone前端面试 P042：Vue 面试导学与学习顺序前端面试 P096：共享刷新 Promise 与并发失败恢复前端面试 P070：React 面试导学与复习主线前端面试 P028：异步输出顺序的逐步推演前端面试 P001：var、let、const 与暂时性死区前端面试 P037：内存泄漏的快照与引用链排查前端面试 P017：手写 bind、重复绑定与构造调用你好，这里是 Henry 的自留地给想法找一个落脚的地方，也给那些解决过的问题留下一点记录。
Esc 关闭
全部文章

前端面试 P059：导航守卫、顺序与权限边界

前端3 分钟

来源：方格前端讲面试 · 17.Vue-Router的路由守卫，5 分 29 秒。

回看定位：00:28 分类 · 00:28 组件守卫 · 04:19 顺序的原说法

全局、记录与组件守卫

beforeEach 处理全局导航前检查；beforeEnter 针对进入记录；beforeRouteLeave、beforeRouteUpdate 等处理组件离开或复用。Router 4 常用返回值或 Promise 决定结果：false 取消，路由位置重定向，正常返回继续。

router.beforeEach(to => {
  if (to.meta.requiresAuth && !session.isLoggedIn && to.name !== 'login') {
    return { name: 'login', query: { redirect: to.fullPath } };
  }
});

这是配置片段，session 为应用提供的当前会话状态。跳回 redirect 前还要校验目标，避免不受控跳转。旧 next 形式仍可用，但分支中要避免重复调用或一直不调用。

必须纠正：离开守卫不在全局前置之后才统一执行

课程把顺序概括为“全局 beforeEach → beforeEnter → 组件守卫”，不完整且会误导。常见顺序是：离开组件的 beforeRouteLeave → 全局 beforeEach → 复用组件 beforeRouteUpdate → 路由 beforeEnter → 解析异步组件 → 进入组件 beforeRouteEnter → beforeResolve → 确认导航 → afterEach 等后续步骤。

beforeRouteEnter 中还没有组件实例，不能使用 this；Options API 的 beforeRouteLeave 可以访问已存在实例，不能把两者一并说成都不能访问。

重用与权限

仅 params/query/hash 改变，不一定重新触发 beforeEnter，应根据记录重用规则处理。afterEach 不能阻止导航，适合完成后的观察、标题等操作，并处理导航 failure。

前端守卫改善导航和展示体验，不是服务端权限边界。敏感接口必须独立认证授权，即使有人绕过前端路由也不能拿到无权数据。

依据：Vue Router：导航守卫及完整流程。关联：前端面试 P060：路由 meta、合并与界面配置。

#前端面试#Vue#VueRouter#导航守卫
看看其他文章 →