动态服务器 AJAX (Cookie、Session)
静态服务器 V.S. 动态服务器:也叫静态网页 V.S. 动态网页
判断依据
是否请求了数据库
- 没有请求数据库,就是静态服务器
- 请求了数据库,就是动态服务器
简单化数据库 /db/users.json
结构:一个数组
[
{"id":1,"name":"frank","password":"xxx"},
{"id":2,"name":"jack","password":"zzz"},
{"id":3,"name":"tom","password":"yyy"},
{"id":3,"name":"tom","password":"yyy"}
]
读取users数据
- 先fs.readFileSync(‘./db/users.json’).toString()
- 然后 JSON.parse 反序列化,得到数组
存储users 数据
- 先JSON.stringify 序列化,得到字符串
- 然后fs.writeFileSync(‘./db/users/json’,data)
目标1
实现用户注册功能
- 用户提交用户名和密码
- users.json里就新增了一行数据
思路
- 前端写一个form,让用户填写name和password
- 前端监听submit事件,前端发送post请求,数据位于请求体
- 后端接收post请求
- 后端获取请求体中的name和password,后端存储数据
目标2
实现用户登录功能
- 首页home.html,已登录用户可看到自己用户名
- 登录页sign_in.html,供提交用户名和密码
- 输入的用户名密码如果是匹配的,就会自动跳转首页
sign_in.html思路
- 前端写一个form,让用户填写name和password
- 前端监听submit事件
- 前端发送post请求,数据位于请求体
- 后端接收post请求,后端获取请求体中的name和password
- 后端读取数据,看是否有匹配的name和password
- 如果匹配,后端应标记用户已登录,怎么标记?
Cookie
定义
- Cookie 是服务器下发给浏览器的一段字符串
- 浏览器必须保存这个cookie(除非用户删除)
- 之后发起相同二级域名请求(任何请求)时,浏览器必须附上cookie
以公园门票作为对比(画图)
- 假如你是公园检票员,怎么知道谁能进谁不能进?
- 有票就能进,没票不能进
- cookie就是门票,有cookie就是登录了,没有cookie就没登录
- 那后端给浏览器下发一个cookie就可以了
response.setHeader('Set-Cookie','logined=1') 响应头 语法见MDN文档
home.html 怎么知道登录的是谁呢?把logined 改成user_id
目标3
显示用户名
- home.html 渲染前获取user信息
- 如果有user,则将{} 替换成user.name
- 如果无user,则显示登录按钮
目标4:防止篡改 user_id(cookie)
思路1:加密
- 将user_id 加密发送给前端,后端读取user_id 时解密,此法可行,但是还有安全漏洞
- 漏洞:加密后的内容可无限期使用
- 解决方法:JWT
思路2:把信息隐藏在服务器
- 把用户信息放在服务器的x里,再给信息一个随机id
- 把随机id发给浏览器,后端下次读取到id时,通过x[id]获取用户信息
- 因为id很长而且可以设置随机,用户无法在篡改id
- x是文件,不能用内存因为断电内存就会清空,这个x又被叫做session(会话)