登录的前后端合作

从创建用户到用户登录

1. 用户注册。由前端的页面得到用户信息然后将需要的用户注册信息传给后端。
2. 创建用户。后端拿到前端的用户信息之后，进行数据库的信息比对，如果信息无误，则插入到数据库。这里需要知道的是前端可以选择是否要进行字段合法性检测，后端必须要检查字段是否合法，因为用户可以通过curl直接访问网站而不经过浏览器页面。
3. 用户登录。用户输入用户名和密码之后，点击登录按钮，前端将用户输入的信息提交给后端，后端拿到信息之后进行比对，如果用户名密码正确的话则允许登录，否则给出提示。
4. 登录信息保存。浏览器使用Cookie来存储用户信息，如果你需要保持用户的登录状态，那么后端需要在用户登录成功之后将用户登录信息保存在Cookie里。
5. 在页面展示用户信息。后端使用nodejs获取Cookie，然后通过Cookie的唯一字段去数据库里寻找需要展示的字段信息，将字段信息返回给前端，前端根据返回的信息进行页面展示。

开始写

先写一个登录页面

登录页面发请求

$("#signUpForm").on("submit", (e) => {
    e.preventDefault()
    let hash = {}
    let keys = ['userName', 'email', 'password', 'passwordComformation']
    keys.forEach((key) => {
        hash[key] = $("#signUpForm").find(`[name=${key}]`).val()
    })
    $.ajax({
        url: '/signUp',
        method: 'POST',
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify(hash),
        error: function () {
        console.log("error");
        },
        success: function () {
        console.log("success");
        }
    })
})

nodejs获取前端发送的请求

因为数据是一点一点发送的，得到的是Buffer对象，要转成json格式

request.on('data', chunk => {
    let json = JSON.parse(chunk.toString())
    console.log(json)
});

数据合法性检测

这个demo里我们需要检测的是email是否符合要求、以及password和passwordConfirmation是否匹配。前后端使用同一个约定字符串，后端负责返回错误类型，前端对这个错误类型进行解释说明并呈现给用户。

弄一个数据库

因为是做一个demo，所以这里我们创建data.db文件作为一个简单的数据库。格式如下：

[{
    "userName": "xxx",
    "email": "aaa@bbb.cn",
    "password": "cc"
}]

实际使用的时候，密码应该是加密存储，但是这里先不做那些。

往数据库里添加数据

先读取数据文件，然后再往这个文件后面追加东西，再把数据写到数据文件里。

let users = fs.readFileSync('./database.db', 'utf8')
users = JSON.parse(users)
users.push({
    "userName": userName, 
    "email": email,
    "password": password
})
let userStr = JSON.stringify(users)
fs.writeFileSync('./database.db', userStr)

对添加进数据库的数据进行筛选

用户发送的数据可能是不对的，我们之前进行了数据本身的校验，但除此之外，大部分时候我们还需要将新的数据与数据库里其他的数据进行比较，这里我们设置注册邮箱必须唯一。
读取数据库文件，然后对其进行遍历，如果邮箱地址存在则返回400，给出提示；如果不存在的话就将注册用户信息填入数据库并返回success。

用户登录

添加登录的前端页面，并在后台添加登录接口，比对用户提交的登录信息，进行登录验证，如果验证通过则允许登录。用户登录之后直接跳转到主页面index。

使用Cookie储存登录用户的信息

登录成功之后写入cookie

response.writeHead(200, {
    'Set-Cookie': [`sign_in_email=${data.email}`,"aaa=bbb","ccc=ddd","eee=fff"]
})

在主页读取cookie获取当前登录用户的信息

读取cookie

var cookies = {};
request.headers.cookie && request.headers.cookie.split(';').forEach(function( Cookie ) {
    var parts = Cookie.split('=');
    cookies[ parts[ 0 ].trim() ] = ( parts[ 1 ] || '' ).trim();
});
console.log(cookies)

获取了cookie之后再通过cookie的信息拿到你需要的用户信息，再把用户信息展示到页面上。

写在后面

代码

github地址：https://github.com/wenchuyang/simple-projects/tree/master/nodejs/signUp

关于Cookie

1. 服务器通过Set-Cookie响应头设置Cookie
2. 浏览器得到Cookie之后，每次请求都要带上Cookie
3. 服务器通过读取Cookie得到登录用户的用户信息
4. Cookie可以手动修改，在浏览器控制台Application里查看cookie的值就可以修改。or js document.cookie。
5. Cookie存在C盘的一个文件里
6. Cookie存在有效期，浏览器决定过期时间，默认20分钟左右。后端可以强制设置有效期。

安全性

因为用户可以篡改Cookie，所以我们换了另一种方案——浏览器信息存储方式

打赏