2018-03-24 cookie与登录、注册
回顾
image.png
请求和响应
server.js里写个路由
image.png
然后开服务，打开浏览器
image.png
image.png
image.png
image.png
看下请求头
image.png
这里呢 server.js和sign_up.html其实都放在服务器那里，然后浏览器输入网址，发送请求，server.js根据path进行路由，把sign_up.html发给浏览器，然后浏览器进行渲染
image.png
把值和name存到hash里
image.png
image.png
问：
image.png
发了一个post之后，结果是什么？404还是一堆html还是都不是？
image.png
发送ajax
image.png
得到一串符合html语法的字符串
image.png
搜node http get post data
服务端如何获取浏览器端用户输入的数据呢？
image.png
根据路径和method，服务端监听得到的数据（分段上传的）存到body里，然后再用concat连起来转换成字符串
image.png
用户点击提交按钮之后存下来的hash
也可以进行封装一个函数
image.png
image.png
我们把浏览器用户输入的账户、密码、确认密码给解析出来，
image.png
image.png
解析出来之后进行判断
image.png
image.png
image.png
image.png
如果用户输入的格式不对，让后端返回json
，前端打印出数据
image.png
image.png
image.png
把字符串转换成对象，然后取出errors
image.png
image.png
每次把字符串转换成对象（
image.png
）有点麻烦，还有另外一种方式
加一个响应头，设置下格式
image.png
再console.log(request)
image.png
image.png
image.png
加个友好提示，在对应输入框的右边，而不是进行alert
image.png
image.png
如果用户没有输入任何东西，就点提交，这时就没必要发post请求，自己判断下
image.png
在正式发post请求之前加判断
image.png
这里问题 ，填下一个空时，上一个的提示没消失
这里再加个判断
image.png
注意each用法
整个过程是前端验证邮箱是否存在、密码是否填写，确认密码是否填写，密码和确认密码是否一致，后端验证邮箱格式是否带有@，其实前后端都可以判断，前端可以不判断，后端一定要判断
因为有些直接用curl来发请求，不用js发，
image.png
curl 'http://localhost:8888/sign_up' -H 'Pragma: no-cache' -H 'Origin: http://localhost:8888' -H 'Accept-Encoding: gzip, deflate, br' -H 'Accept-Language: zh-CN,zh;q=0.9' -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36' -H 'Content-Type: application/x-www-form-urlencoded; charset=UTF-8' -H 'Accept: /' -H 'Cache-Control: no-cache' -H 'X-Requested-With: XMLHttpRequest' -H 'Connection: keep-alive' -H 'Referer: http://localhost:8888/sign_up' --data 'email=1&password=2&password_confirmation=2' --compressed
image.png
这样是不安全的，所以后端一定要判断
接下来把输入的数据存下来
没有数据库？那就弄一个没有后缀的文件，里面是个json语法表示的空数组
http的李爵士说，URL里不能有@符号，如果有就用%40来代替
方法，把拿到的value里的%40变成@
hash[key]=decodeURIComponent(value)
image.png
这句话的意思是，我们试一试users=JSON.parse(users)，如果有问题，我们就清空下
image.png
把数据存到db里
image.png
image.png
数据里有数据了
image.png
问题:同样的用户名，同样的密码再注册一边，则db数据里重复的存了2遍
那么我们在存用户数据之前，先判断下
image.png
遍历下然后做判断
问题：用户的数据明文存在db里，不合适，尤其是密码
先清空db/users里的数据
image.png
做登录界面
server端
image.png
GET是做请求页面的，刷新显示
POST是做提交表单的
html页
image.png
登录界面提交的数据保存下来，同时遍历db里的数据，两者进行比较，进行判断，如果OK，返回200，如果不OK，则返回401
image.png
image.png
接下里，如果登录成功了，就跳到首页
image.png
image.png
问题：我不需要登录，只需要输入正确的路径依然可以到首页，这就是问题
做法：没有登录，就不让你进来
这里涉及到cookie（类似进公园门票的例子）
搜http set cookie
image.png
image.png
登录的时候，设置响应头cookie，登录成功后进入首页页面，然后发起请求头，带有cookie
image.png
登录的时候（成功后），给你发了一张票（设置cookie），后面你登录首页或其他的时候，你会带上这个票（cookie）
cookie特点
1、服务器通过Set-Cookie响应头设置cookie
2、浏览器得到cookie之后，每次请求都带上cookie
3、服务器读取cookie就知道登录用户的信息了
问题：
1、我在chrome登录了得到cookie，那我用其他浏览器访问，其他浏览器会带上cookie吗？
NO
2、cookie存在哪？windows存在C盘的一个文件里，其他系统存在硬盘里
3、cookie能做假吗？
可以
image.png
这个value可以改
4、cookie有有效期吗？
默认有效期是20分钟左右
后端可以强制设置有效期 看MDN
cookie是按照域名分组的，你只能带上自己的cookie
image.png
比如我们举个例子，加上httponly
image.png
image.png
js是看不到这个cookie的
如果不加，则js可以去改
image.png
需求：首页能够显示用户信息
搜nodejs read cookie
image.png
image.png
整个过程
image.png
cookie是跟着域名走的
