动态服务器 Note-FrontEnd-32

312 阅读4分钟

动态服务器的相关知识,内容包括什么是动态服务器、实现用户注册功能、实现用户登录功能、标记用户已登录、显示用户名、防篡改 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 数据

  1. 先 fs.readFileSync('./db/user.json).toString()
  2. 然后 JSON.parse 一下(反序列化),得到数组

存储 user 数据

  1. 先 JSON.stringify 一下(序列化),得到字符串
  2. 然后 fis.readFileSync('./db/users/json',data)

二、目标 1 -- 实现用户注册功能

用户提交用户名和密码,user.json 里就新增了一行数据

思路

  1. 前端写一个 form,让用户填写 name 和 password
  2. 前端监听 submit 事件
  3. 前端发送 post 请求,数据位于请求体
  4. 后端接收 post 请求
  5. 后端获取请求体中的 name 和 password
  6. 后端存储数据

三、目标 2 -- 实现用户登录功能

首页 home.html,已登录用户可看到自己的用户名,登录页 sign_in.html,提交用户名和密码

sign_in.html 思路

  1. 前端写一个 form,让用户填写 name 和 password
  2. 前端监听 submit 事件
  3. 前端发送 post 请求,数据位于请求体
  4. 后端接收 post 请求
  5. 后端获取请求体中的 name 和 password
  6. 后端读取数据,看是否有匹配的 name 和 password
  7. 如果匹配,后端应该标记用户已登录,可是怎么标记?

四、目标 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. 思路二:把信息隐藏在服务器里

  1. 把用户信息放在服务器的 x 里,再个信息一个随机 id
  2. 把随机 id 发个浏览器
  3. 后端下次读取到 id 时,通过 x[id] 获取用户信息
  4. 想想为什么用户无法篡改 id(因为 id 很长,而且随机)
  5. x 是什么?是文件。不能用内存,因为断电内存就会清空
  6. 这个 x 又被叫做 session(会话)

3. Cookie / Session 总结

服务器可以给浏览器下发 Cookie:通过 Response Header,具体语法见 MDN

浏览器上的 Cookie 可以被篡改:用开发者工具就能改,萌新后端下发的 Cookie 用 JS 也能篡改

服务器下发不可篡改的 Cookie:Cookie 可包含加密后的信息(还得解密,麻烦),Cookie 也可只包含一个 id(随机数),用 session[id] 可以在后端拿到对应的信息,这个 id 无法被篡改(但可能被复制,问题不大)

七、Question & Answer

1. Cookie 和 Session 的区别

  1. Cookie 存在浏览器,Session 存在服务器
  2. Cookie 长度有限制,Session 一般没有
  3. Session 是借助 Cookie 实现的,id 存在 cookie。

2. Cookie 和 LocalStorage 的区别

  1. Cookie 会被放在每一次的请求里,LS 不会
  2. Cookie 长度有限制,LS 的长度一般为 5M ~ 10M

「资料来源:©饥人谷」