摘要：例如用戶去去買點(diǎn)東西，添加了一個(gè)熱水壺一部小米手機(jī)到購物車?yán)锩?，那么服?wù)器端可以改寫你上面的使之具體化，表示你購物車?yán)锩尜I了倆東西。一張圖總結(jié)注冊登錄的過程接下來可以去搞一搞其他的，像什么哇代碼鏈接

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

當(dāng)你在瀏覽器的輸入框里輸入localhost:8080/sign_in的時(shí)候，會(huì)發(fā)起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后，分析數(shù)據(jù)，和數(shù)據(jù)庫里面的比對

var users = fs.readFileSync("./db/users", "utf8")
try {
    users = JSON.parse(users) //[] JSON也支持?jǐn)?shù)組
} 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
}

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

其實(shí)這和平常上網(wǎng)的情形類似的，有時(shí)候我們訪問一些購物網(wǎng)站，并沒有登錄，但是你在購物車?yán)锩嫣砑訓(xùn)|西了，當(dāng)你逛了以后再回來的時(shí)候，發(fā)現(xiàn)購物車?yán)锩嬗心愕挠涗?，幫你做這個(gè)事的也是cookie。

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

可以看出，當(dāng)你在sign_in發(fā)起GET請求并設(shè)置了Set-Cookie之后，其他的同源的頁面，又都會(huì)帶上Cookie，也就能保證同源的網(wǎng)頁向服務(wù)器發(fā)起請求的時(shí)候，服務(wù)器能夠明白，你己經(jīng)是登錄的用戶了，與那些沒有拿到cookie的頁面區(qū)別開來。

為什么要在cookie里面寫上HttpOnly呢，因?yàn)檫@個(gè)可以防止有些牛人使用JS修改Cookie的內(nèi)容。

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

寫了HttpOnly之后將無法修改

這個(gè)是Chrome的功能，用于分析cookie的

每一部分的作用詳見這里

通過上述的例子，可以總結(jié)幾點(diǎn)重要的特點(diǎn)

服務(wù)器通過 Set-Cookie 響應(yīng)頭設(shè)置 Cookie

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

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

當(dāng)然了，還有幾個(gè)問題需要解答一下。

Cookie 存在哪
存在硬盤的一個(gè)文件里面

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

Cookie 有效期嗎？

默認(rèn)有效期20分鐘左右，不同瀏覽器策略不同
后端可以強(qiáng)制設(shè)置有效期

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

具體語法看 Set-Cookie

既然你成功登錄，理應(yīng)跳轉(zhuǎn)到首頁，并顯示相應(yīng)的界面。

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

然后首頁的信息應(yīng)該根據(jù)用戶信息做出相應(yīng)的變化

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"]

為什么用； 字符來分割呢，這是因?yàn)榭梢杂卸鄠€(gè)cookie

一般來說常見的作用有如下兩個(gè)：

識別用戶的身份。當(dāng)用戶A去訪問localhost:8080的時(shí)候，服務(wù)器會(huì)給A一個(gè)獨(dú)一無二的id=00A(這就是cookie)，當(dāng)用戶A訪問localhost:8080的其他網(wǎng)頁的時(shí)候，都會(huì)帶著那個(gè)獨(dú)一無二的id。當(dāng)B用戶來訪問localhost:8080的時(shí)候，服務(wù)器發(fā)現(xiàn)他沒有任何標(biāo)識，也會(huì)給他一個(gè)獨(dú)一無二的id=00B，所以借助cookie服務(wù)器端就能夠分清楚誰是誰了。

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

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

代碼鏈接sign_in.html

server.js