摘要:例如用戶去去買點東西,添加了一個熱水壺一部小米手機到購物車里面,那么服務器端可以改寫你上面的使之具體化,表示你購物車里面買了倆東西。一張圖總結注冊登錄的過程接下來可以去搞一搞其他的,像什么哇代碼鏈接
上篇介紹了注冊的基本流程,下篇簡單的講講登錄的流程以及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的入門為什么要在cookie里面寫上HttpOnly呢,因為這個可以防止有些牛人使用JS修改Cookie的內容。
如果不寫這個的話,可以使用js修改的
寫了HttpOnly之后將無法修改
_ga是啥這個是Chrome的功能,用于分析cookie的
每一部分的作用詳見這里
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
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
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/107397.html
摘要:例如用戶去去買點東西,添加了一個熱水壺一部小米手機到購物車里面,那么服務器端可以改寫你上面的使之具體化,表示你購物車里面買了倆東西。一張圖總結注冊登錄的過程接下來可以去搞一搞其他的,像什么哇代碼鏈接 上篇介紹了注冊的基本流程,下篇簡單的講講登錄的流程以及Cookie的出現 實現登錄的小功能 當你在瀏覽器的輸入框里輸入localhost:8080/sign_in的時候,會發起GET請求,...
摘要:如果非要用漢語理解的話應該是一段小型文本文件,由網景的創始人之一的盧蒙特利在年發明。上述的套路會一直用下去,的組合。應該填入信息后,錯誤信息就消失的。 cookie 如果非要用漢語理解的話應該是 一段小型文本文件,由網景的創始人之一的盧 蒙特利在93年發明。上篇是熟悉一下注冊的大致流程,下篇熟悉登錄流程以及真正的Cookie 實現基本的注冊功能 我們打開網站,瀏覽網站,最常見的兩個操...
閱讀 1926·2021-11-24 09:39
閱讀 3515·2021-09-28 09:36
閱讀 3282·2021-09-06 15:10
閱讀 3433·2019-08-30 15:44
閱讀 1154·2019-08-30 15:43
閱讀 1797·2019-08-30 14:20
閱讀 2712·2019-08-30 12:51
閱讀 2031·2019-08-30 11:04