摘要：例如用戶去去買點東西，添加了一個熱水壺一部小米手機到購物車里面，那么服務器端可以改寫你上面的使之具體化，表示你購物車里面買了倆東西。一張圖總結注冊登錄的過程接下來可以去搞一搞其他的，像什么哇代碼鏈接

上篇介紹了注冊的基本流程，下篇簡單的講講登錄的流程以及Cookie的出現

當你在瀏覽器的輸入框里輸入localhost:8080/sign_in的時候，會發起GET請求，去訪問sign_in.html

if (path === "/sign_up" && method === "GET") {
  let string = fs.readFileSync("./sign_up.html", "utf8")
  response.statusCode = 200
  response.setHeader("Content-Type", "text/html;charset=utf-8")
  response.write(string)
  response.end()
}

CSS布局與上篇的布局基本一樣，略去不表～

依然是上篇的套路，獲得用戶formdata后，分析數據，和數據庫里面的比對

var users = fs.readFileSync("./db/users", "utf8")
try {
    users = JSON.parse(users) //[] JSON也支持數組
} catch (exception) {
    users = []
}

let found 
for (let i = 0; i < users.length; i++) {
if (users[i].email === email && users[i].password === password) {
  found = true
  break
  }
}
if (found) {
  response.setHeader("Set-Cookie", `sign_in_email=${email};HTTPOnly`)
  response.statusCode = 200
} else {
  response.statusCode = 401
}

不同的是引入了一個header，也就是今天的主角--Cookie

其實這和平常上網的情形類似的，有時候我們訪問一些購物網站，并沒有登錄，但是你在購物車里面添加東西了，當你逛了以后再回來的時候，發現購物車里面有你的記錄，幫你做這個事的也是cookie。

因為HTTP協議是無狀態的，即服務器不知道用戶上一次做了什么，這嚴重阻礙了交互式Web應用程序的實現。在典型的網上購物場景中，用戶瀏覽了幾個頁面，買了一盒餅干和兩瓶飲料。最后結帳時，由于HTTP的無狀態性，不通過額外的手段，服務器并不知道用戶到底買了什么，所以Cookie就是用來繞開HTTP的無狀態性的“額外手段”之一。服務器可以設置或讀取Cookies中包含信息，借此維護用戶跟服務器會話)中的狀態。

可以看出，當你在sign_in發起GET請求并設置了Set-Cookie之后，其他的同源的頁面，又都會帶上Cookie，也就能保證同源的網頁向服務器發起請求的時候，服務器能夠明白，你己經是登錄的用戶了，與那些沒有拿到cookie的頁面區別開來。

為什么要在cookie里面寫上HttpOnly呢，因為這個可以防止有些牛人使用JS修改Cookie的內容。

如果不寫這個的話，可以使用js修改的

寫了HttpOnly之后將無法修改

這個是Chrome的功能，用于分析cookie的

每一部分的作用詳見這里

通過上述的例子，可以總結幾點重要的特點

服務器通過 Set-Cookie 響應頭設置 Cookie

瀏覽器得到 Cookie 之后，每次請求都要帶上 Cookie

服務器讀取 Cookie 就知道登錄用戶的信息（email）

當然了，還有幾個問題需要解答一下。

Cookie 存在哪
存在硬盤的一個文件里面

Cookie會被用戶篡改嗎？
可以，也就是說它并不安全的。

Cookie 有效期嗎？

默認有效期20分鐘左右，不同瀏覽器策略不同
后端可以強制設置有效期

Set-Cookie: =; Expires=
Set-Cookie: =; Max-Age=

具體語法看 Set-Cookie

既然你成功登錄，理應跳轉到首頁，并顯示相應的界面。

$.post("/sign_in", hash)
.then((response) => {
  window.location.href = "/"
}, 
(request) => {
  alert("郵箱與密碼不匹配")
  }
)

然后首頁的信息應該根據用戶信息做出相應的變化

let cookies = request.headers.cookie.split("; ") //["email=..@..", "a=1"]
let hash = {}
cookies.forEach((cookie) => {
  let parts = cookie.split("=")
  let key = parts[0]
  let value = parts[1]
  hash[key] = value
})
let email = hash.sign_in_email
let users = fs.readFileSync("./db/users", "utf8")
users = JSON.parse(users)
let foundUser
for (let i = 0; i < users.length; i++) {
  if (users[i].email === email) {
    foundUser = users[i]
    break
  }
}
if (foundUser) {
  string = string.replace("email", foundUser.email)
} else {
  string = string.replace("恭喜，email你已成功登錄", "沒有該用戶")
}

這里的代碼邏輯與上篇的基本一致，唯一的不同在于第一行代碼

let cookies = request.headers.cookie.split("; ") //["email=..@..", "a=1"]

為什么用； 字符來分割呢，這是因為可以有多個cookie

一般來說常見的作用有如下兩個：

識別用戶的身份。當用戶A去訪問localhost:8080的時候，服務器會給A一個獨一無二的id=00A(這就是cookie)，當用戶A訪問localhost:8080的其他網頁的時候，都會帶著那個獨一無二的id。當B用戶來訪問localhost:8080的時候，服務器發現他沒有任何標識，也會給他一個獨一無二的id=00B，所以借助cookie服務器端就能夠分清楚誰是誰了。

記錄你的瀏覽歷史。最常見的需求就是你去逛購物網站，你添加到購物車里面的東西過幾天一定會在，而不會憑空消失了。例如A用戶去taobao.com去買點東西，添加了一個熱水壺、一部小米手機到購物車里面，那么服務器端可以改寫你上面的cookie使之具體化「id=00A; cart=A1,A2」，表示你購物車里面買了倆東西。你過幾天想起來了，去購物車里面看，熱水壺、小米手機還在里面。瀏覽器并不會刪除你存到硬盤上的cookie。

接下來可以去搞一搞其他的，像什么session LocalStorage……(@ο@) 哇～

代碼鏈接sign_in.html

server.js