一块小饼干(Cookie)的故事-下篇
上篇介绍了注册的基本流程,下篇简单的讲讲登录的流程以及Cookie的出现
实现登录的小功能
当你在浏览器的输入框里输入localhost:8080/sign_in
的时候,会发起GET
请求,去访问sign_in.html
if (path === '/sign_up' && method === 'GET') {let string = fs.readFileSync('./sign_up.html', 'utf8')response.statusCode = 200response.setHeader('Content-Type', 'text/html;charset=utf-8')response.write(string)response.end()
}
复制代码
CSS布局与上篇的布局基本一样,略去不表~
比对用户的信息与数据库里面的信息是否匹配
依然是上篇的套路,获得用户formdata后,分析数据,和数据库里面的比对
var users = fs.readFileSync('./db/users', 'utf8')
try {users = JSON.parse(users) //[] JSON也支持数组
} catch (exception) {users = []
}let found
for (let i = 0; i < users.length; i++) {
if (users[i].email === email && users[i].password === password) {found = truebreak}
}
if (found) {response.setHeader('Set-Cookie', `sign_in_email=${email};HTTPOnly`)response.statusCode = 200
} else {response.statusCode = 401
}
复制代码
不同的是引入了一个header
,也就是今天的主角--Cookie
其实这和平常上网的情形类似的,有时候我们访问一些购物网站,并没有登录,但是你在购物车里面添加东西了,当你逛了以后再回来的时候,发现购物车里面有你的记录,帮你做这个事的也是cookie。
因为HTTP协议是无状态的,即服务器不知道用户上一次做了什么,这严重阻碍了交互式Web应用程序的实现。在典型的网上购物场景中,用户浏览了几个页面,买了一盒饼干和两瓶饮料。最后结帐时,由于HTTP的无状态性,不通过额外的手段,服务器并不知道用户到底买了什么,所以Cookie就是用来绕开HTTP的无状态性的“额外手段”之一。服务器可以设置或读取Cookies中包含信息,借此维护用户跟服务器会话中的状态。
可以看出,当你在sign_in发起GET
请求并设置了Set-Cookie
之后,其他的同源的页面,又都会带上Cookie
,也就能保证同源的网页向服务器发起请求的时候,服务器能够明白,你己经是登录的用户了,与那些没有拿到cookie的页面区别开来。
Cookie的入门
为什么要在cookie里面写上HttpOnly
呢,因为这个可以防止有些牛人使用JS
修改Cookie的内容。
- 如果不写这个的话,可以使用
js
修改的
写了HttpOnly
之后将无法修改
_ga是啥
这个是Chrome的功能,用于分析cookie的
每一部分的作用详见这里
Cookie的特点
通过上述的例子,可以总结几点重要的特点
- 服务器通过 Set-Cookie 响应头设置 Cookie
- 浏览器得到 Cookie 之后,每次请求都要带上 Cookie
- 服务器读取 Cookie 就知道登录用户的信息(email)
当然了,还有几个问题需要解答一下。
- Cookie 存在哪 存在硬盘的一个文件里面
- Cookie会被用户篡改吗? 可以,也就是说它并不安全的。
- Cookie 有效期吗?
默认有效期20分钟左右,不同浏览器策略不同 后端可以强制设置有效期
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit>
复制代码
具体语法看 Set-Cookie
用户登录后,首页显示不同
既然你成功登录,理应跳转到首页,并显示相应的界面。
$.post('/sign_in', hash)
.then((response) => {window.location.href = '/'
},
(request) => {alert('邮箱与密码不匹配')}
)
复制代码
然后首页的信息应该根据用户信息做出相应的变化
let cookies = request.headers.cookie.split('; ') //['email=..@..', 'a=1']
let hash = {}
cookies.forEach((cookie) => {let parts = cookie.split('=')let key = parts[0]let value = parts[1]hash[key] = value
})
let email = hash.sign_in_email
let users = fs.readFileSync('./db/users', 'utf8')
users = JSON.parse(users)
let foundUser
for (let i = 0; i < users.length; i++) {if (users[i].email === email) {foundUser = users[i]break}
}
if (foundUser) {string = string.replace('email', foundUser.email)
} else {string = string.replace('恭喜,email你已成功登录', '没有该用户')
}
复制代码
这里的代码逻辑与上篇的基本一致,唯一的不同在于第一行代码
let cookies = request.headers.cookie.split('; ') //['email=..@..', 'a=1']
为什么用;
字符来分割呢,这是因为可以有多个cookie
Cookie的两个作用
一般来说常见的作用有如下两个:
- 识别用户的身份。当用户A去访问
localhost:8080
的时候,服务器会给A一个独一无二的id=00A
(这就是cookie),当用户A访问localhost:8080
的其他网页的时候,都会带着那个独一无二的id。当B用户来访问localhost:8080
的时候,服务器发现他没有任何标识,也会给他一个独一无二的id=00B
,所以借助cookie服务器端就能够分清楚谁是谁了。 - 记录你的浏览历史。最常见的需求就是你去逛购物网站,你添加到购物车里面的东西过几天一定会在,而不会凭空消失了。例如A用户去
taobao.com
去买点东西,添加了一个热水壶、一部小米手机到购物车里面,那么服务器端可以改写你上面的cookie使之具体化「id=00A; cart=A1,A2」,表示你购物车里面买了俩东西。你过几天想起来了,去购物车里面看,热水壶、小米手机还在里面。浏览器并不会删除你存到硬盘上的cookie。
一张图总结注册登录的过程
接下来可以去搞一搞其他的,像什么session
LocalStorage
……(@ο@) 哇~
代码链接sign_in.html
server.js
一块小饼干(Cookie)的故事-下篇相关推荐
- LeetCode 455[Python]. 分发饼干 假设你是一位很棒的家长,想要给你的孩子们一些小饼干。但是,每个孩子最多只能给一块饼干。
LeetCode 455. 分发饼干 假设你是一位很棒的家长,想要给你的孩子们一些小饼干.但是,每个孩子最多只能给一块饼干. 对每个孩子 i,都有一个胃口值 g[i],这是能让孩子们满足胃口的饼干的最 ...
- Java练习 SDUT-2737_小鑫の日常系列故事(六)——奇遇记
小鑫の日常系列故事(六)--奇遇记 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 今天,小鑫在山上玩的时候,意外被推下 ...
- 废旧光盘手工小制作_佳味家味浓 丨佳人美食手工零食课堂:咸蛋黄牛轧糖夹心小饼干制作活动...
7月7日下午,嘉定工业区社会组织服务中心来到上海育成生物科技园开展"佳味•家味浓"嘉定工业区社企白领健康关爱服务项目,本次活动主题为:佳人美食手工零食课堂之咸蛋黄牛轧糖夹心小饼干, ...
- sdut-2732 小鑫の日常系列故事(一)——判断对错
点击打开链接 小鑫の日常系列故事(一)--判断对错 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Discuss Problem ...
- 5元以下纯铜小摆件_【拍4斤发5斤】早餐饼干网红早餐代餐曲奇酥性小饼干零食500g6元优惠券券后价5.8元...
★[拍4斤发5斤]早餐饼干网红早餐代餐曲奇酥性小饼干零食500g,6元拼多多优惠券★券后价5.8元★★★[拍4斤发5斤]早餐饼干网红早餐代餐曲奇酥性小饼干零食500g¥5.8元¥11.8元已拼3975 ...
- 小鑫の日常系列故事(十)——排名次
小鑫の日常系列故事(十)--排名次 Description 小鑫在来到SDUT之后,经过十分刻苦的学习和努力终于进入了ACM集训队.很快又一次ACM集训队的选拔就要开始了,集训队员们又忙碌了起来.他也 ...
- 小鑫の日常系列故事(二)——石头剪子布 SDUT
小鑫の日常系列故事(二)--石头剪子布 SDUT Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Descri ...
- python小猴子摘桃子的故事_【小猴摘桃的故事】小猴摘桃_亲亲宝贝网
1 小猴摘桃的故事 有一天傍晚,小老虎去找小猴子,它想请小猴子帮忙摘桃子. 小猴子好奇地问:"小老虎,你种了桃树吗?" 小老虎说:"我没有种桃树,不过,我的新房子旁边本来 ...
- 项目管理小故事之小矮人的故事
小矮人的故事 在古希腊时期的塞浦路斯,曾经有一座城堡里关着一群小矮人.传说他们是因为受到了可怕咒语的诅咒,而被关到这个与世隔绝的地方.他们找不到任何人可以求助,没有粮食,没有水,七个小矮人越来越绝 望 ...
最新文章
- Android应用程序安装过程源代码分析(1)
- LeetCode——Same Tree(判断两棵树是否相同)
- Shell(5)——(())、let、array的查看方式
- 10字符串及整数操作符
- mysql升级mysql5.7.22记录
- 一起来学习BERT常见的几个变体
- 【基础学习】操作系统学习笔记 - 内存管理:内存使用与分段、内存分区与分页、多级页表、快表、段页式内存管理的实现、内存的换入换出
- 【C++】STL学习小总结
- verilog——三八译码器
- 端子台UL认证 UL 1059
- Google Earth Engine笔记-计算时间序列hurst指数
- windows7内存诊断工具有用吗_用Windows内存诊断工具检查内存可靠性
- 交互媒体专题设计大作业
- 2021年 CISCN writeup
- 华为OD面经2022-8-9(持续更新)
- 真神奇!敲击桌子就能操控iPad或iPhone
- React+DvaJS 之 hook 路由权限控制
- assertThat详解
- 仿微同商城后台API
- JavaScript单选框选择操作