摘要：需要注意的細(xì)節(jié)問題為什么前后端都要進(jìn)行表單驗證前后端都要驗證郵箱格式是否正確，賬號密碼格式是否正確，兩次提交的密碼是否相同等。因為黑客可以繞過前端的驗證流程，例如黑客可以直接使用進(jìn)行請求的發(fā)送，直接與后臺服務(wù)器進(jìn)行交互。

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

完整代碼:

完整代碼

注冊時把賬號密碼寫入數(shù)據(jù)庫

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

后臺的登錄路由代碼(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)鍵在這里,驗證成功,設(shè)置登錄Cookie為登錄的郵箱,并放在響應(yīng)里發(fā)給瀏覽器
                response.setHeader("Set-Cookie", `sign_in_email=${email}`)
                response.statusCode = 200
            } else {
                response.statusCode = 401
            }
            response.end()
        })
    }

在登錄成功的一瞬間,需要后臺設(shè)置一個Cookie,記錄一下登陸的用戶id(這里用郵箱表示,代碼在上面),然后發(fā)響應(yīng)給瀏覽器
例如在服務(wù)器端設(shè)置響應(yīng)頭：set-cookies：[email protected]

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

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

然后跳轉(zhuǎn)到主頁，這時候我們查看跳轉(zhuǎn)到主頁的請求：

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

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

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

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

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

首頁代碼:

    
我是首頁
    

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

    退出登錄(刪除cookie)

后臺路由代碼

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對象數(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__", "未登錄,請去登錄")
            string = string.replace("__email__", "沒")
            string = string.replace("__password__", "沒")
        }
        
        response.setHeader("Content-Type", "text/html;charset=utf-8")
        response.write(string)
        response.end()
    }

在沒有Cookie的時候,首頁的狀態(tài)

登錄之后,后臺根據(jù)Cookie查詢數(shù)據(jù)庫,將用戶名與密碼傳到前臺的首頁上

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

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

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

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

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

1.我在 Chrome 登錄了得到 Cookie，用 Safari 訪問，Safari 會帶上 Cookie 嗎
no

2.Cookie 存在哪
Windows 存在 C 盤的一個文件里

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

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

前后端都要驗證郵箱格式是否正確，賬號密碼格式是否正確，兩次提交的密碼是否相同等。
因為黑客可以繞過前端的js驗證流程，例如黑客可以直接使用curl 進(jìn)行請求的發(fā)送，直接與后臺服務(wù)器進(jìn)行交互。
如圖:

所以后臺也需要進(jìn)行表單驗證。

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