Hello大家好!我是Cathy海希,今天是我学习编程的第47天。
欢迎同时关注我的Youtube&B站?Cathy海希TV
今天后知后觉地发现方方老师有在知乎上提及跟我相关的内容,简直太荣幸了?如果还不知道方方老师是谁的人,请搜索知乎 方应杭,方方老师的各种回答绝对让你恍然大悟,这也正是我当初决定加入饥人谷学习的契机。
传送门?https://bit.ly/3hING3E
每日斯多葛
Fast, lift, sprint, stretch, and meditate.
Build, sell, write, create, invest, and own.
Read, reflect, love, seek truth, and ignore society. Make these habits. Say no to everything else.
Avoid debt, jail, addiction, disgrace, shortcuts, and media.
Relax. Victory is assured.
以上是我非常喜欢的思想家Naval的推特之一,让人回味无穷……
学习时间
8h
学习内容
复习【前后分离】Ajax 实战:Cookie、Session
今天把整个实战部分的视频看了多遍,也跟着敲了一遍,实际写代码的话非常有助于为自己的思路指向,让我清楚自己现在的处境和需求。昨天的日记里我只给出了脑图的整理,今天我以文字的形式再来谈谈我对Cookie和session的理解。
需求背景
编程里的各个概念肯定都是应运而生的,Cookie和session也不例外。我们通过实现网页中用户注册、登录的功能,来看看这两者在其中是如何发挥它们的作用的吧!
用户注册
前端:把用户注册的数据通过POST请求,发给后端。
后端:获取到位于请求体的数据,储存到数据库里。我们这里使用一个users.json
文件作为数据库。为了实现把数据储存到数据库里,需要两个大的步骤:
读数据库(?转化成JS对象),对JS对象做完处理后,
再写数据库(?转化成JSON字符串)。
用户登录
前端:把用户登录的数据通过POST请求,发给后端。
后端:获取到位于请求体的数据,看看数据库里是否有匹配的数据(用户名&密码)。
Cookie
大家应该都有过这样子的体验:登录成功了一次的页面,下一次也是可以维持在【已登录】的状态。这是怎么做到的呢?我们什么都不做的时候,通过正确的信息登录跳转的/home.html和直接输入地址进入的/home.html发的请求没有区别啊?如何识别一个用户是登录过的还是没有登录过的呢?人类发明的一切都是来源于生活,包括Cookie。我们可以联想公园的检票员,他是通过是否有门票来区别游客的。那么我们是不是也可以借用跟门票一样的存在去区别登录过和没有登录的用户呢?那么当用户成功登录,为了标记用户已登录,我们让服务器发一张门票吧——在响应头里添加一个东西:
response.setHeader('Set-Cookie', 'login= 1',HttpOnly);//这是Node.js的写法
?服务器会下发一段字符串给浏览器,这便是大名鼎鼎的Cookie啦?
浏览器在收到响应之后通常会保存下Cookie(在开发者工具的Application里查看),之后对该服务器的每一次请求中都会把Cookie放在请求头里发送给服务器。
设置了HttpOnly
属性的cookie不能使用JavaScript 经由Document.cookie 属性、XMLHttpRequest 和Request APIs 进行访问,防止黑客从前端篡改Cookie。
然后我们让服务器读取看看有没有Cookie,
const cookie = request.headers['cookie']
如果cookie匹配的话就让让页面显示【已登录】。
但是我们不仅仅希望页面只显示【已登录】,还想更加人性化一点,比较可以显示【欢迎海希回来】,这个海希明显是用户信息的一部分,我们怎么拿到它呢?首先,服务器把user_id放到Cookie里,
response.setHeader('Set-Cookie', `user_id = ${user.id},HttpOnly`);
/home.html
渲染之前,先通过请求头里Cookie里的${user.id}
首先看数据库里有没有user,有的话就把用户名替换对应的占位符{{user.name}}
就好了。如果没有的话,就显示登录按钮。
光有Cookie还不够
但是,做到了上面一步,看似没问题,但是打开开发者工具Application查看Cookie的话,会发现一个大问题!如果我知道另外一个用户的user_id,我只要修改成他的user_id,我不就可以黑他的页面了吗!?所以把user_id直接放在Cookie里,暴露在前端是非常危险的做法。那么应该如何做呢?
session
这里有一个好办法:把user_id信息藏在后端服务器里。怎么做呢?
- 建立一个
session.json
专门用来管理隐藏的信息; - 服务器设置Cookie的时候,不直接发user_id,而是发一个随机id。
const random = Math.random();
response.setHeader('Set-Cookie', `session_id = ${random},HttpOnly`);
- 先读取
session.json
,然后把【随机数对应user.id】再写到这个文件里; - 这样子我们就传了一段浏览器不知道是什么玩意儿的字符串在Cookie里。
随着而来的/home.html
渲染之前,先通过看请求头里Cookie里的sessionId
首先看有没有这个session,有的话就拿来其对应用户名去替换占位符{{user.name}}
就好了。
由于session存在于服务器端的文件上,我们可以让其具有时效性,比如随时删除我们觉得有问题的数据。
session总结
Session保存在服务器的文件中,服务器一般会将 Session id 放到 Cookie 中,发放给浏览器。
mindset
呼……为了帮助自己理解整个思路,整个代码实现的视频看了3、4遍?现在至少在用户注册、登录整个情景里,我已经彻底搞清楚Cookie和session的存在理由了。学习新事物就是要知难而上,如果内容都是一些简单的不烧脑的,那也就说明进步不大。典型的痛并快乐着?