摘要：需要注意的細(xì)節(jié)問(wèn)題為什么前后端都要進(jìn)行表單驗(yàn)證前后端都要驗(yàn)證郵箱格式是否正確，賬號(hào)密碼格式是否正確，兩次提交的密碼是否相同等。因?yàn)楹诳涂梢岳@過(guò)前端的驗(yàn)證流程，例如黑客可以直接使用進(jìn)行請(qǐng)求的發(fā)送，直接與后臺(tái)服務(wù)器進(jìn)行交互。

這篇文章是前一篇文章(Cookie理論知識(shí))的實(shí)踐性理解

完整代碼:

完整代碼

注冊(cè)時(shí)把賬號(hào)密碼寫(xiě)入數(shù)據(jù)庫(kù)

第一次登錄時(shí)服務(wù)器給瀏覽器發(fā)送Cookie.

后臺(tái)的登錄路由代碼(nodejs):

else if (path === "/sign_in" && method === "POST") {
        readBody(request).then((body) => {
            let strings = body.split("&") // ["email=1", "password=2", "password_confirmation=3"]
            let hash = {}
            strings.forEach((string) => {
                // string == "email=1"
                let parts = string.split("=") // ["email", "1"]
                let key = parts[0]
                let value = parts[1]
                hash[key] = decodeURIComponent(value) // hash["email"] = "1"
            })
            let {
                email,
                password
            } = hash
            var users = fs.readFileSync("./db/users", "utf8")
            try {
                users = JSON.parse(users) // []
            } 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) {//關(guān)鍵在這里,驗(yàn)證成功,設(shè)置登錄Cookie為登錄的郵箱,并放在響應(yīng)里發(fā)給瀏覽器
                response.setHeader("Set-Cookie", `sign_in_email=${email}`)
                response.statusCode = 200
            } else {
                response.statusCode = 401
            }
            response.end()
        })
    }

在登錄成功的一瞬間,需要后臺(tái)設(shè)置一個(gè)Cookie,記錄一下登陸的用戶(hù)id(這里用郵箱表示,代碼在上面),然后發(fā)響應(yīng)給瀏覽器
例如在服務(wù)器端設(shè)置響應(yīng)頭：set-cookies：user_email=1@mtt.com

這時(shí)候我們查看響應(yīng)：

發(fā)現(xiàn)響應(yīng)頭已經(jīng)設(shè)置cookie.

然后跳轉(zhuǎn)到主頁(yè)，這時(shí)候我們查看跳轉(zhuǎn)到主頁(yè)的請(qǐng)求：

發(fā)現(xiàn)跳轉(zhuǎn)到主頁(yè)的請(qǐng)求頭中包含cookie字段(以后訪(fǎng)問(wèn)這個(gè)域名都會(huì)帶著這個(gè)Cookie)!所以，就像上篇文章說(shuō)的：

如果服務(wù)器給了瀏覽器一個(gè)setcookie的響應(yīng)頭，那么這個(gè)瀏覽器以后所有的請(qǐng)求，只要是相同的源(即就是上次給我發(fā)送Cookie的那個(gè)域名,域名和端口相同)，那就么就會(huì)把當(dāng)時(shí)服務(wù)器發(fā)給這個(gè)瀏覽器的Cookie帶著

以后，瀏覽器一旦訪(fǎng)問(wèn)這個(gè)路徑，瀏覽器就會(huì)附上這段 Cookie 發(fā)送給服務(wù)器

即:第一次請(qǐng)求,服務(wù)器為瀏覽器設(shè)置Cookie.下次請(qǐng)求,瀏覽器帶上Cookie,發(fā)送給服務(wù)器.
第一次登錄的時(shí)候,服務(wù)器給瀏覽器的響應(yīng)設(shè)置一個(gè)Cookie,set-cookies：user_email=1@mtt.com,然后當(dāng)瀏覽器下次進(jìn)行請(qǐng)求的時(shí)候,發(fā)現(xiàn)Cookie中有名為User_email的Cookie,而且我發(fā)送請(qǐng)求的域名還是上次發(fā)給我?guī)ookie的響應(yīng)的那個(gè)域名.

那么就無(wú)需再次登錄了.相當(dāng)于服務(wù)器給瀏覽器發(fā)了進(jìn)入門(mén)票,下次或下下次瀏覽器在進(jìn)入服務(wù)器的時(shí)候給服務(wù)器看票就可以了

首頁(yè)代碼:

    
我是首頁(yè)
    

        注冊(cè)
        登錄
    
    
    
你的狀態(tài)是:__status__
    
你的郵箱賬號(hào)是:__email__
    
你的密碼是:__password__

    退出登錄(刪除cookie)

后臺(tái)路由代碼

if (path === "/") {
        response.statusCode = 200
        let string = fs.readFileSync("./index.html")
        string = string.toString();
        var users = fs.readFileSync("./db/users", "utf8")
        users = JSON.parse(users)//轉(zhuǎn)化為user對(duì)象數(shù)組

        console.log(users);
        let cookies = request.headers.cookie || ""http://["email=111", "asdasd=111"]
        cookies = cookies.split("; ")
        let hash={}
        cookies.forEach((string)=>{
            let parts = string.split("=")
            let key = parts[0]
            let value = parts[1]
            hash[key] = value;
        })
        
        let eamil = hash.sign_in_email
        let foundedUser
        users.forEach((userObj)=>{
            if(userObj.email===eamil){
                foundedUser = userObj;
            }
        })
        console.log(foundedUser);
        if(foundedUser){
            string = string.replace("__status__", "已登錄")
            string = string.replace("__email__", foundedUser.email)
            string = string.replace("__password__", foundedUser.password)
        }else{
            string = string.replace("__status__", "未登錄,請(qǐng)去登錄")
            string = string.replace("__email__", "沒(méi)")
            string = string.replace("__password__", "沒(méi)")
        }
        
        response.setHeader("Content-Type", "text/html;charset=utf-8")
        response.write(string)
        response.end()
    }

在沒(méi)有Cookie的時(shí)候,首頁(yè)的狀態(tài)

登錄之后,后臺(tái)根據(jù)Cookie查詢(xún)數(shù)據(jù)庫(kù),將用戶(hù)名與密碼傳到前臺(tái)的首頁(yè)上

退出登錄將刪除Cookie并刷新頁(yè)面,重新回到未登錄的狀態(tài)

我們得到Cookie的特點(diǎn):

第一次登錄的時(shí)候,服務(wù)器通過(guò) Set-Cookie 響應(yīng)頭設(shè)置 Cookie,然后以響應(yīng)的形式發(fā)給瀏覽器

瀏覽器得到 響應(yīng)中Cookie 之后，之后每次請(qǐng)求這個(gè)域名都要帶上這個(gè) Cookie

之后服務(wù)器讀取當(dāng)時(shí)自己設(shè)置的 Cookie 就知道登錄用戶(hù)的信息（email）

1.我在 Chrome 登錄了得到 Cookie，用 Safari 訪(fǎng)問(wèn)，Safari 會(huì)帶上 Cookie 嗎
no

2.Cookie 存在哪
Windows 存在 C 盤(pán)的一個(gè)文件里

3.Cookie會(huì)被用戶(hù)篡改嗎？
可以，例如在谷歌瀏覽器開(kāi)發(fā)者模式下的application->Cookie中可以手動(dòng)修改,修改之后,下次發(fā)送請(qǐng)求時(shí),附帶的就是修改后的Cookie

JS中也有可以操作cookie的api
( 假如換成別的用戶(hù)的賬號(hào),那么還可以登錄成功的話(huà),就會(huì)存在風(fēng)險(xiǎn)問(wèn)題.Session 來(lái)解決這個(gè)問(wèn)題，防止用戶(hù)篡改)
后端可以強(qiáng)制設(shè)置不允許修改Cookie，只要將Cookie的屬性設(shè)置為Httponly即可(還可以手動(dòng)改,但是JS改不了,也無(wú)法獲取),具體語(yǔ)法看 MDN
4.Cookie 有效期嗎？
默認(rèn)有效期20分鐘左右，不同瀏覽器策略不同(如果瀏覽器一直開(kāi)著,那么Cookie不會(huì)被刪除.如果關(guān)閉瀏覽器,那么瀏覽器為了安全考慮,20分鐘左右后可能會(huì)刪除Cookie.這也取決于服務(wù)器如何設(shè)置Cookie的有效期)
后端可以強(qiáng)制設(shè)置有效期，具體語(yǔ)法看 MDN
Cookie 遵守同源策略嗎？
也有，不過(guò)跟 AJAX 的同源策略稍微有些不同。
當(dāng)請(qǐng)求 qq.com 下的資源時(shí)，瀏覽器會(huì)默認(rèn)帶上 qq.com 對(duì)應(yīng)的 Cookie，不會(huì)帶上 baidu.com 對(duì)應(yīng)的 Cookie
當(dāng)請(qǐng)求 v.qq.com 下的資源時(shí)，瀏覽器不僅會(huì)帶上 v.qq.com 的Cookie，還會(huì)帶上 qq.com 的 Cookie
另外 Cookie 還可以根據(jù)路徑做限制，請(qǐng)自行了解，這個(gè)功能用得比較少。

前后端都要驗(yàn)證郵箱格式是否正確，賬號(hào)密碼格式是否正確，兩次提交的密碼是否相同等。
因?yàn)楹诳涂梢岳@過(guò)前端的js驗(yàn)證流程，例如黑客可以直接使用curl 進(jìn)行請(qǐng)求的發(fā)送，直接與后臺(tái)服務(wù)器進(jìn)行交互。
如圖:

所以后臺(tái)也需要進(jìn)行表單驗(yàn)證。

cookie：曲奇餅
cache-control：緩存控制