静态服务器和动态服务器的区别
判断依据
是否请求数据库
读取数据，存储数据
目标一
实现用户注册功能
- 用户提交用户名和密码
- users.json 里就新增了一行数据
思路
- 前端写一个 form，让用户填写 name 和 password
- 前端监听 submit 事件
- 前端发送 post 请求，数据位于请求体
- 后端接收 post 请求
- 后端获取请求体中的 name 和 password
- 后端存储数据
目标二
实现用户登录功能
- 首页 home.html，已登录用户可看到自己用户名
- 登录 登录页面，供提交用户名和密码
- 输入用户名密码如果匹配，就自动跳转首页
登录页面思路
- 前端写一个 form，让用户填写 name 和 password
- 前端监听 submit 事件
- 前端发送 post 请求，数据位于请求体
- 后端接收 post 请求
- 后端获取请求体中的 name 和 password
- 后端读取数据，看是否有匹配的 name 和 password
- 如果匹配，后端应标记用户已登录
Cookie
定义
- Cookie 是服务器下发给浏览器的一段字符串
- 浏览器必保存这个 Cookie (除非用户删除)
- 之后发起相同二级域名请求 (任何请求) 时,浏览器必须附上 Cookie
Set-Cookie 响应头
response.setHeader('Set-Cookie', `user_id=${user.id}
const cookie = request.headers['cookie']
目标三
显示用户名
- 首页渲染前获取 user 信息
- 如果有 user, 则将 {{user.name}} 替换成 user.name
- 如果无 user, 则显示登录按钮
目标四 防篡改 user_id
思路一: 加密
- 将 user_id 加密发送给前端, 后端读取 user_id 时解密, 此法可行, 但有安全漏洞
- 漏洞: 加密后的内容可无限期使用
- 解决办法: JWT
思路二: 把信息隐藏在服务器
- 把用户信息放在服务器的 x 里, 再给信息一个随机 id
- 把随机 id 发给浏览器
- 后端下次读取到 id 时, 通过 x[id] 获取用户信息
