摘要：需要注意的细节问题为什么前后端都要进行表单验证前后端都要验证邮箱格式是否正确，账号密码格式是否正确，两次提交的密码是否相同等。因为黑客可以绕过前端的验证流程，例如黑客可以直接使用进行请求的发送，直接与后台服务器进行交互。

这篇文章是前一篇文章(Cookie理论知识)的实践性理解

完整代码:

完整代码

注册时把账号密码写入数据库

第一次登录时服务器给浏览器发送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) {//关键在这里,验证成功,设置登录Cookie为登录的邮箱,并放在响应里发给浏览器
                response.setHeader("Set-Cookie", `sign_in_email=${email}`)
                response.statusCode = 200
            } else {
                response.statusCode = 401
            }
            response.end()
        })
    }

在登录成功的一瞬间,需要后台设置一个Cookie,记录一下登陆的用户id(这里用邮箱表示,代码在上面),然后发响应给浏览器
例如在服务器端设置响应头：set-cookies：user_email=1@mtt.com

这时候我们查看响应：

发现响应头已经设置cookie.

然后跳转到主页，这时候我们查看跳转到主页的请求：

发现跳转到主页的请求头中包含cookie字段(以后访问这个域名都会带着这个Cookie)!所以，就像上篇文章说的：

如果服务器给了浏览器一个setcookie的响应头，那么这个浏览器以后所有的请求，只要是相同的源(即就是上次给我发送Cookie的那个域名,域名和端口相同)，那就么就会把当时服务器发给这个浏览器的Cookie带着

以后，浏览器一旦访问这个路径，浏览器就会附上这段 Cookie 发送给服务器

即:第一次请求,服务器为浏览器设置Cookie.下次请求,浏览器带上Cookie,发送给服务器.
第一次登录的时候,服务器给浏览器的响应设置一个Cookie,set-cookies：user_email=1@mtt.com,然后当浏览器下次进行请求的时候,发现Cookie中有名为User_email的Cookie,而且我发送请求的域名还是上次发给我带Cookie的响应的那个域名.

那么就无需再次登录了.相当于服务器给浏览器发了进入门票,下次或下下次浏览器在进入服务器的时候给服务器看票就可以了

首页代码:

    
我是首页
    

        注册
        登录
    
    
    
你的状态是:__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)//转化为user对象数组

        console.log(users);
        let cookies = request.headers.cookie || ""//["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的时候,首页的状态

登录之后,后台根据Cookie查询数据库,将用户名与密码传到前台的首页上

退出登录将删除Cookie并刷新页面,重新回到未登录的状态

我们得到Cookie的特点:

第一次登录的时候,服务器通过 Set-Cookie 响应头设置 Cookie,然后以响应的形式发给浏览器

浏览器得到 响应中Cookie 之后，之后每次请求这个域名都要带上这个 Cookie

之后服务器读取当时自己设置的 Cookie 就知道登录用户的信息（email）

1.我在 Chrome 登录了得到 Cookie，用 Safari 访问，Safari 会带上 Cookie 吗
no

2.Cookie 存在哪
Windows 存在 C 盘的一个文件里

3.Cookie会被用户篡改吗？
可以，例如在谷歌浏览器开发者模式下的application->Cookie中可以手动修改,修改之后,下次发送请求时,附带的就是修改后的Cookie

JS中也有可以操作cookie的api
( 假如换成别的用户的账号,那么还可以登录成功的话,就会存在风险问题.Session 来解决这个问题，防止用户篡改)
后端可以强制设置不允许修改Cookie，只要将Cookie的属性设置为Httponly即可(还可以手动改,但是JS改不了,也无法获取),具体语法看 MDN
4.Cookie 有效期吗？
默认有效期20分钟左右，不同浏览器策略不同(如果浏览器一直开着,那么Cookie不会被删除.如果关闭浏览器,那么浏览器为了安全考虑,20分钟左右后可能会删除Cookie.这也取决于服务器如何设置Cookie的有效期)
后端可以强制设置有效期，具体语法看 MDN
Cookie 遵守同源策略吗？
也有，不过跟 AJAX 的同源策略稍微有些不同。
当请求 qq.com 下的资源时，浏览器会默认带上 qq.com 对应的 Cookie，不会带上 baidu.com 对应的 Cookie
当请求 v.qq.com 下的资源时，浏览器不仅会带上 v.qq.com 的Cookie，还会带上 qq.com 的 Cookie
另外 Cookie 还可以根据路径做限制，请自行了解，这个功能用得比较少。

前后端都要验证邮箱格式是否正确，账号密码格式是否正确，两次提交的密码是否相同等。
因为黑客可以绕过前端的js验证流程，例如黑客可以直接使用curl 进行请求的发送，直接与后台服务器进行交互。
如图:

所以后台也需要进行表单验证。

cookie：曲奇饼
cache-control：缓存控制