Day2 · 🔐 模块 16

增加登录认证

为现有业务页面加登录入口、路由守卫和登出能力。

下载本模块材料
边界需联网

彩蛋揭发 · 员工表在「裸奔」

发现员工敏感字段对未登录用户裸奔,引出需要一道门。

约 10 分钟
本节材料
操作步骤
  1. 打开 dashboard,进员工列表,再打开王芳的详情页。
  2. 看页面是否直接显示底薪、身份证号、家庭住址、私人手机。
  3. 在隐私窗口里直接打开 dashboard 网址,确认未登录也能看到这些。
完成标志

发现敏感字段对任何人裸奔、未登录也能看——引出「先加一道门(认证)」。

人工边界

只使用交付包内的课堂模拟数据;不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时,停在最终动作前等待人工确认。

走查记录彩蛋揭发 · 员工表在「裸奔」Day2 · 边界 · 预估 10 分钟
主线需联网

极简登录 · 只一个 admin 账号

加一个最简登录页,先把「进门」做出来。

约 5 分钟
复制给 AI

完成标志

访问 /login,用 admin/admin 能登进 dashboard,sessionStorage.user 里有 { username: "admin" }。

人工边界

只使用交付包内的课堂模拟数据;不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时,停在最终动作前等待人工确认。

走查记录极简登录 · 只一个 admin 账号Day2 · 主线 · 预估 5 分钟
主线需联网

为所有页面添加路由守卫

所有页面加守卫,未登录一律弹回登录页。

约 3 分钟
复制给 AI

完成标志

先点右上角登出(或用隐私窗口打开),再直接输入任意页面网址回车,都会被送回 /login。

人工边界

只使用交付包内的课堂模拟数据;不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时,停在最终动作前等待人工确认。

走查记录为所有页面添加路由守卫Day2 · 主线 · 预估 3 分钟
主线需联网

添加用户菜单和登出

顶部显示当前用户并提供登出。

约 2 分钟
复制给 AI

完成标志

右上角能看到当前用户;点一次登出会回到 /login。

人工边界

只使用交付包内的课堂模拟数据;不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时,停在最终动作前等待人工确认。

走查记录添加用户菜单和登出Day2 · 主线 · 预估 2 分钟
边界需联网

⚡ Aha:门关上了 · 但屋里一锅粥

区分认证与授权:门关上了,但屋里字段还没分权。

约 15 分钟
操作步骤
  1. 用隐私窗口打开 dashboard,确认会跳到 /login。
  2. 用 admin/admin 登录,检查登录后是否仍能看到王芳的底薪和身份证号。
  3. 记下认证与授权的区别:认证管「谁能进」,授权管「进来后能看哪些字段、哪些行」。
完成标志

看到「门关上了但屋里所有人还看得到所有敏感字段」——引出下一模块的字段权与行权。

人工边界

只使用交付包内的课堂模拟数据;不得替换为真实客户隐私。涉及账号、密码、部署、发布、外发或第三方提交时,停在最终动作前等待人工确认。

走查记录⚡ Aha:门关上了 · 但屋里一锅粥Day2 · 边界 · 预估 15 分钟