用登录注册理解cookie

作者: 小志1 | 来源:发表于2018-04-19 17:39 被阅读0次

用登录注册理解cookie
Session
2018-09-24Cookie注册
登录注册需求分析&&初识Cookie
H43-Cookie与登录注册
Cookie与登录注册
Cookie和登录注册
登录注册与cookie
注册登录与 Cookie
登录注册与Cookie

下载以后命令行node server 8080，打开http://localhost:8080

浏览器做前端，server（node）做后台来模拟登陆。

浏览器打开sign_up注册

<div class="form-wrapper">
        <h1>注册</h1>
        <form id="signUpForm">
            <div class="row">
                <label>邮箱</label>
                <input type="text" name="email">
                <span class="error"></span>
            </div>
            <div class="row">
                <label>密码</label>
                <input type="password" name="password">
                <span class="error"></span>
            </div>
            <div class="row">
                <label>确认密码</label>
                <input type="password" name="password_confirmation">
                <span class="error"></span>
            </div>
            <div class="row">
                <input type="submit" value="注册">
            </div>
        </form>
    </div>

然后发一个post请求 post它的email password 和password_confirmation。

$.post('./sign_up',hash)  
                .then((response)=>{
                    console.log(response)
                }, (request)=>{
                    let {errors} = request.responseJSON
                    if(errors.email && errors.email === 'invalid'){
                        $form.find('[name="email"]').siblings('.error')
                            .text('邮箱格式错误')
                    }
                })

server这边判断没问题就写数据库记录下来。

function readyBody(request){
    return new Promise((resolve,reject)=>{
        let body = [];    
        request.on('data', (chunk) => {
            body.push(chunk);
        }).on('end', () => {
            body = Buffer.concat(body).toString();
            resolve(body)
        });
    })
}

然后告诉用户注册成功了
用户打开sign_in登录页面，用户发送post请求，带上email和password。

<div class="form-wrapper">
        <h1>登录</h1>
        <form id="signInForm">
            <div class="row">
                <label>邮箱</label>
                <input type="text" name="email">
                <span class="error"></span>
            </div>
            <div class="row">
                <label>密码</label>
                <input type="password" name="password">
                <span class="error"></span>
            </div>
            <div class="row">
                <input type="submit" value="登录">
            </div>
        </form>
    </div>

这个时候server看数据在不在数据库里，在说明是上次注册的内容，不在就提示用户注册一个。

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}`)
            response.statusCode = 200
        }else{
            response.statusCode = 401
        }

这里假设用户是对的，这时候server告诉浏览器，我给你一个cookie（Set-Cookie），然后浏览器就回把它记录下来，这一次用户再去访问首页就跟之前访问首页不一样了。

    if(found){
        response.setHeader('Set-Cookie',`sign_in_email=${email}`)
        response.statusCode = 200
    }
  
    let foundUser
        for(let i=0;i<users.length;i++){
          if(users[i].email === email){
              foundUser = users[i]
              break
          }
    }
    if(foundUser){
        string = string.replace('__password__',foundUser.password)
    }else{
        string = string.replace('__password__','不知道')
    }

sign_in

localhost

main.js
可以看到sign_in设置了cookie头以后，其他地方都有Cookie了。(Cookie:sign_in_email=1@11.com)

由于浏览器得到这个cookie，用户打开首页浏览器会带上cookie（get请求），server读一下这个cookie，有这个email，通过email找user，
var users = fs.readFileSync('./db/users', 'utf8') (./db/users相当于数据库)
user包括{email，password}，server在返回html之前，在html填入对应信息，然后html就是新的html，然后响应回去。用户就可以看到自己的信息。

正确用户index.html

假如是其他用户打开首页，就给所有人看到一样的信息，因为不知道是哪个用户（没有cookie或者cookie是错的）

其他用户index.html

if(foundUser){
        string = string.replace('__password__',foundUser.password)
    }else{
        string = string.replace('__password__','不知道')
    }