以登录注册理解Cookie的作用过程

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

完整代码:

注册

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

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的响应的那个域名.

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

后台读取Cookie保留登录状态与删除Cookie退出登录状态

首页代码:

<body>
    <h1>我是首页</h1>
    <div class="">
        <a href="./sign_up">注册</a>
        <a href="./sign_in">登录</a>
    </div>
    
    <h1>你的状态是:__status__</h1>
    <h1>你的邮箱账号是:__email__</h1>
    <h1>你的密码是:__password__</h1>

    <a href="javascript:;" id="logOffBtn">退出登录(删除cookie)</a>

</body>
<script>
logOffBtn.addEventListener("click", () => {
        // 删除一个现存 Cookie 的唯一方法，是设置它的expires属性为一个过去的日期。
        document.cookie = 'sign_in_email=;expires=Thu, 01-Jan-1970 00:00:01 GMT'
        window.location = "/"
    })
</script>

后台路由代码

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）

几个关于Cookie的问题

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：缓存控制

以登录注册理解Cookie的作用过程

Cookie在注册登录时的作用过程：

注册

登录

后台读取Cookie保留登录状态与删除Cookie退出登录状态

Cookie在登录的时候的特点

几个关于Cookie的问题

需要注意的细节问题

为什么前后端都要进行表单验证?

Cookie如何手动关闭

翻译