Skip to content

开发记录:认证与路由权限链路重构

这篇开发记录用于复盘 M5-5 的背景、目标、执行过程和最终结果。

为什么在 M5-5 补认证与权限

前面的案例已经覆盖了页面、基础组件、SSR、Nuxt、状态管理和复杂交互,但这些内容在真实项目里还会被另一条高频主线反复影响:认证链路。

只要这条链路没有收口,前面任何一类场景都会逐渐出现问题:

  • 页面层会反复判断登录态
  • 请求层会和 UI 提示越耦越深
  • store 会混入大量一次性认证副作用
  • 路由守卫会变成散落的 if/else 集合

所以 M5-5 选择认证与权限,是为了把“登录页、请求拦截、路由准入”这一条非常常见的横向架构线补齐。

这轮做了什么

这轮主要完成了这些事情:

  • 新增认证、请求与路由权限案例文档
  • 新增 M5-5 任务拆解文档
  • 新增 M5-5 详细设计文档
  • 更新里程碑、入口、导航与统一框架
  • 将认证与权限型案例正式纳入当前方法库

这轮最重要的决策

决策一:先讲认证边界,再讲登录页细节

这轮没有把重点放在“表单怎么写”,而是放在:

  • 登录页是否拥有过多系统职责
  • 会话层应该如何抽离
  • 请求层为什么不该直接依赖 UI 与 store
  • 路由权限为什么必须变成显式协议

决策二:选 vue-admin 的最小壳子作为案例来源

虽然这个示例规模不大,但它正好覆盖了认证场景里最常见的三个入口:

  • 登录页
  • 请求拦截器
  • 路由入口

它很适合作为“从旧式页面 + 拦截器耦合结构,走向现代分层认证链路”的过渡案例。

决策三:用现代 Vue 3 组织方式重写方法表达

原始素材来自 Vue 2,但本轮文档沉淀时,统一改用更适合当前项目的方法表达:

  • 组合式 composable
  • 显式 route meta
  • 可注入的请求适配层
  • 页面与展示层分离

这样新案例能直接挂到当前已经形成的统一框架里。

本轮自测怎么做

这轮仍然只修改文档,因此自测继续聚焦文档完整性:

  • 检查新增 Markdown 文件是否生成成功
  • 检查本地链接是否全部可解析
  • 检查入口页、导航图和总框架是否已经接入新案例
  • 检查 M5-5 的任务拆解、详细设计和开发记录是否齐全

本轮结果

M5-5 完成后,当前方法库已经不只覆盖状态、渲染和交互问题,也开始覆盖一条更贴近真实后台系统与业务平台的架构主线:认证与权限。

这意味着后续如果继续扩展:

  • session store 设计
  • 角色权限建模
  • 登录后回跳协议
  • 请求错误归一化
  • Nuxt 中间件与鉴权协作

都已经有了稳定挂载点。

共 20 个模块,1301 篇 Markdown 文档。