动态服务器的相关知识,内容包括什么是动态服务器、实现用户注册功能、实现用户登录功能、标记用户已登录、显示用户名、防篡改 user_id、Question & Answer。
一、什么是动态服务器
1. 判断依据
动态服务器与静态服务器相对应,判断依据为:
- 是否请求了数据库
没有请求数据库,就是静态服务器,请求了数据库,就是动态服务器
2. /db/users.json
这里直接用 json 文件当做数据库
结构:一个数组
// 注意下面省略了双引号,是错误的写法
[
{id: 1,name:' frank' ,password: '***' age: 18},
{id: 2, name: 'jack', password: '***', age: 20}
]
读取 users 数据
- 先 fs.readFileSync('./db/user.json).toString()
- 然后 JSON.parse 一下(反序列化),得到数组
存储 user 数据
- 先 JSON.stringify 一下(序列化),得到字符串
- 然后 fis.readFileSync('./db/users/json',data)
二、目标 1 -- 实现用户注册功能
用户提交用户名和密码,user.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
- 如果匹配,后端应该标记用户已登录,可是怎么标记?
四、目标 3 -- 标记用户已登录
目标 2 受阻,目标太大了,目标应该尽量小
Cookie
Cookie 是服务器下发给浏览器的一段字符串,浏览器必须保存这个 Cookie(除非用户删除),之后发起相同二级域名请求(任何请求)时,浏览器必须附上 Cookie
以公园门票作为对比,假如你是公园检票员,你怎么知道谁能进谁不能进?有票能进,没票不能进,Cookie 就是门票,有 Cookie 就是登陆了,没 Cookie 就没登录,那后端给浏览器下发一个 Cookie 不就完事了嘛
Set-Cookie 响应头的语法看 MDN 文档
home.html 怎么知道登录的是谁呢?把 logined 改成 user_id
五、目标 4 -- 显示用户名
home.html 先软前获取 user 信息,如果有 user,则将 {{user.name}} 替换成 user.name,如果无 user,则显示登录按钮
有一个大 bug:用户可以篡改 user_id 啊啊啊!开发者工具或者 JS 都能改
六、目标 5 -- 防篡改 user_id
1. 思路一:加密
将 user_id 加密发送给前端,后端读取 user_id 时解密,此法可行,但是又安全漏洞
漏洞:加密后的内容可无限期使用
解决办法:JWT
2. 思路二:把信息隐藏在服务器里
- 把用户信息放在服务器的 x 里,再个信息一个随机 id
- 把随机 id 发个浏览器
- 后端下次读取到 id 时,通过 x[id] 获取用户信息
- 想想为什么用户无法篡改 id(因为 id 很长,而且随机)
- x 是什么?是文件。不能用内存,因为断电内存就会清空
- 这个 x 又被叫做 session(会话)
3. Cookie / Session 总结
服务器可以给浏览器下发 Cookie:通过 Response Header,具体语法见 MDN
浏览器上的 Cookie 可以被篡改:用开发者工具就能改,萌新后端下发的 Cookie 用 JS 也能篡改
服务器下发不可篡改的 Cookie:Cookie 可包含加密后的信息(还得解密,麻烦),Cookie 也可只包含一个 id(随机数),用 session[id] 可以在后端拿到对应的信息,这个 id 无法被篡改(但可能被复制,问题不大)
七、Question & Answer
1. Cookie 和 Session 的区别
- Cookie 存在浏览器,Session 存在服务器
- Cookie 长度有限制,Session 一般没有
- Session 是借助 Cookie 实现的,id 存在 cookie。
2. Cookie 和 LocalStorage 的区别
- Cookie 会被放在每一次的请求里,LS 不会
- Cookie 长度有限制,LS 的长度一般为 5M ~ 10M
「资料来源:©饥人谷」