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

image.png

image.png

搜node http get post data

服务端如何获取浏览器端用户输入的数据呢？

image.png

根据路径和method，服务端监听得到的数据（分段上传的）存到body里，然后再用concat连起来转换成字符串

image.png

也可以进行封装一个函数

image.png

image.png

我们把浏览器用户输入的账户、密码、确认密码给解析出来，

image.png

image.png

image.png

image.png

image.png

image.png

如果用户输入的格式不对，让后端返回json
，前端打印出数据

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

加个友好提示，在对应输入框的右边，而不是进行alert

image.png

image.png

image.png

image.png

image.png

整个过程是前端验证邮箱是否存在、密码是否填写，确认密码是否填写，密码和确认密码是否一致，后端验证邮箱格式是否带有@，其实前后端都可以判断，前端可以不判断，后端一定要判断

因为有些直接用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

image.png

image.png

image.png

那么我们在存用户数据之前，先判断下

image.png

image.png

image.png

image.png

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

image.png

image.png

image.png

需求：首页能够显示用户信息
搜nodejs read cookie

image.png

image.png

整个过程

image.png