登录注册与Cookie

很多时候，我们登录一个网站的第一步是注册用户，然后登录。

这个高频次的操作前端与后端是如何交互完成登录成功页面跳转的呢？

今天我们来聊一聊登录注册的那些事。

---

登录注册的流程，如上图

第一步：用户在注册页面将自己的账号密码邮箱等等信息传给服务器。

第二步 ：服务器拿到用户的信息后与数据库进行比较，是否重复，若无重复则将此用户信息加入数据库并返回200状态码到客户端。

第三步：客户端收到服务器返回的成功信息后跳转到登录页。

第四步：用户在登录页再次输入账号密码确定后，将登录页的账号密码信息传给服务器。

第五步：服务器拿到用户信息后与数据库信息比对，确认账号密码信息是否与数据库信息一致，倘若一致则返回带有Cookie的响应头至客户端。

第六步：客户端得到响应头后跳转主页。此后，该域名下的接口请求都能带上响应头传过来的cookie请求数据，此后的接口服务器只需验证用户的cookie即可，cookie没有问题则表示登录成功，有问题则表示未登录。

 

登录注册前后端的流程大致就是这样，但是这其中有几个问题。

什么是cookie？

1. Cookie 是浏览器访问服务器后，服务器传给浏览器的一段数据。

2. 浏览器需要保存这段数据，不得轻易删除。

3. 此后每次浏览器访问该服务器，都必须带上这段数据。

如何使用cookie？

第一个作用是识别用户身份。

比如用户 A 用浏览器访问了 http://baidu，那么 http://baidu 的服务器就会立刻给 A 返回一段数据「uid=bbbb」（这就是 Cookie）。当 A 再次访问 http://baidu 的其他页面时，就会附带上「uid=1」这段数据。

同理，用户 B 用浏览器访问 http://baidu 时，http://baidu 发现 B 没有附带 uid 数据，就给 B 分配了一个新的 uid，为2，然后返回给 B 一段数据「uid=eeeee」。B 之后访问 http://baidu 的时候，就会一直带上「uid=eeeee」这段数据。

借此，http://baidu 的服务器就能区分 A 和 B 两个用户了。

第二个作用是记录历史。

假设 http://baidu 是一个购物网站，当 A 在上面将商品 A1 、A2 加入购物车时，JS 可以改写 Cookie，改为「uid=1; cart=A1,A2」，表示购物车里有 A1 和 A2 两样商品了。

这样一来，当用户关闭网页，过三天再打开网页的时候，依然可以看到 A1、A2 躺在购物车里，因为浏览器并不会无缘无故地删除这个 Cookie。

借此，就达到里记录用户操作历史的目的了。

如何退出登录？

通过JS将该cookie删除即可，因为服务器发现用户没有传cookie过来即认为你没有登录。