Day2 · 🔐 模块 16

增加登录认证

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

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

Step 1 彩蛋揭发 · 员工表的"裸奔"

完成“Step 1 彩蛋揭发 · 员工表的"裸奔"”,并观察它对“增加登录认证”能力的作用。

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

已完成“Step 1 彩蛋揭发 · 员工表的"裸奔"”中的观察或讨论,并能复述该步骤得到的结论。

人工边界

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

走查记录Step 1 彩蛋揭发 · 员工表的"裸奔"Day2 · 边界 · 预估 10 分钟
主线需联网

Step 2 极简登录 · 只一个 admin 账号

完成“Step 2 极简登录 · 只一个 admin 账号”,并观察它对“增加登录认证”能力的作用。

约 20 分钟
复制给 AI

完成标志

极简登录页:login 页能用 · admin/admin 登进来 · sessionStorage 有 { username: "admin" }

人工边界

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

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

Step 3 路由守卫 + 顶部登出

完成“Step 3 路由守卫 + 顶部登出”,并观察它对“增加登录认证”能力的作用。

约 15 分钟
复制给 AI

完成标志

所有页面加路由守卫:未登录访问任何页面都被弹回 /login · 陌生人再也看不到员工/客户数据;顶部用户菜单 + 登出:右上角可见当前用户 · 能登出

人工边界

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

走查记录Step 3 路由守卫 + 顶部登出Day2 · 主线 · 预估 15 分钟
边界需联网

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

完成“Step 4 ⚡ Aha:门关上了 · 但屋里一锅粥”,并观察它对“增加登录认证”能力的作用。

约 15 分钟
操作步骤
  1. 在隐私窗口中打开 dashboard URL,确认页面会跳转到 /login。
  2. 使用 admin/admin 登录,检查登录后是否仍能看到王芳的底薪和身份证号。
  3. 记录认证与授权的区别:认证限制谁能进入,授权限制进入后能看哪些字段和数据行。
完成标志

已完成“Step 4 ⚡ Aha:门关上了 · 但屋里一锅粥”中的观察或讨论,并能复述该步骤得到的结论。

人工边界

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

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