node-session-cookie--9

2019-08-07 本文已影响0人 Mcq

什么是cookie
什么是session
能够实现登录功能
知道什么是中间件

1. 登录

目标：使用 users表中记录的用户和对应的密码进行登录

image.png

思路分析：

创建 /login 路由用来显示login.html页面
创建 /checkLogin 路由，检测用户名、检测密码、注册session

① 接收用户名和密码： req.body

② 检测用户名： select * from ali_admin where user_name=?

==查询结果为一条数据则用户名正确，反之用户名错误==

③ 检测密码：表单提交密码和上一步查询出的密码进行比较

④ 显示成功/失败，页面跳转

代码实现：

创建 /login 路由用来显示login.html页面

image.png

image.png

创建 /checkLogin 路由，检测用户名、检测密码、注册session

① 接收数据 ==> 接收用户名和密码

② 拼接SQL语句 ==> select * from users where user_name=? and user_pwd=?

③ 执行SQL语句 ==> db.query()

④ 处理SQL执行结果 ==> 如果用户名密码正确跳转到学生信息列表页，如果不正确跳转回登录页

image.png

2. 会话控制概述

http协议的缺陷

无状态，就是无记忆，不能让同一浏览器和服务器进行多次数据交换时，产生业务的连续性。

什么是会话控制

会话控制就是解决http无记忆的缺陷的。能够==将数据持久化的保存在客户端(浏览器)或者服务器端==，从而让浏览器和服务器进行多次数据交换时，产生连续性。

会话控制的分类

cookie：将数据持久化保存到客户端（浏览器）
session：将数据持久化保存到服务器端

3. cookie技术

3.1 什么是cookie

cookie是将数据持久化存储到客户端的一种技术。
网站可以将数据写到浏览器中，一个网站最多能在一个浏览器写20个cookie。现在的浏览器能写的更多
一个浏览器能够设置的总cookie数最多为300个，每个不能超过4kb。
cookie既能保存在文件中，也能保存在内存中。

cookie应用实例 --- 千人千面（猜你喜欢）

image.png

3.2 设置cookie

核心： ==cookie是随着响应头返回给浏览器的==
设置cookie的核心思想：使用 res.setHeader 或者 writeHeader 将cookie信息设置在响应头中
cookie设置格式：key=value;expires=time
- key: cookie的名称
- value：名称对应的值
- expires：有效期

//1. 使用 setHeader 方法
res.setHeader('cookie', 'id=101');                   //设置单个cookie
res.setHeader('cookie', ['id=101', 'name=zs']);      //设置多个cookie

//2. 使用 writeHeader 方法
res.writeHeader(200, {
    'content-type': 'text/html;charset=utf-8',
    'set-cookie': ['type=10', 'name=my']
})；

//3. 使用 set 方法，该方法是express封装的方法
res.set({'set-cookie':['goodsName=xiaomi 6', 'goodsPrice=3999']})；

//4. 设置cookie时，指定有效期
//注意：要使用UTC时间，使用 toUTCString()方法转换
//设置有效期为 1小时
const expiresTime = new Date(Date.now() + 3600000).toUTCString();
res.set({'set-cookie':['goodsName=xiaomi 6;expires=' + expiresTime, 'goodsPrice=3999']})

image.png

查看响应头：

image.png

浏览器中查看保存的cookie：

image.png

3.3 读取cookie

核心： req.headers.cookie 中

const qs = require('querystring');
const obj = qs.parse('id=10001;name=zs', ';', '=');
console.log(obj);   // {id:10001, name:"zs"}

3.4 cookie有效期

设置了expires则有效期到expires指定的时间
为设置expires则关闭浏览器cookie即消失

4. session技术

4.1 session介绍

因为cookie是保存在客户端的数据，不够安全，所以出现了session。
session会将数据保存到服务器端（保存在文件、内存服务器或数据表中），安全性就可以得到保证。

4.2 设置/读取session

express设置session时，需要使用第三方模块 --- express-session

使用步骤：

加载 express-session 模块
将session注册为中间件
使用req.session对象设置/读取session

//1. 加载 express-session 模块
const session = require('express-session');
//2. 配置项
const obj = {
    secret: '4ey32erfyf3fgpg',   //加密字符串。 使用该字符串来加密session数据，自定义
    resave: false,               //强制保存session即使它并没有变化
    saveUninitialized: false     //强制将未初始化的session存储。当新建了一个session且未
                                 //设定属性或值时，它就处于未初始化状态。
};
//3. 注册为express-session中间件
app.use(session(obj));

//4. 使用 req.session.属性 = 值  方式来设置session
app.get('/sets', (req, res) => {
    req.session.isLogin = true;
    req.session.userInfo = {user_id:10001, user_name:"zs"};
    //注意：一定要将数据发回给浏览器，否则session无法生效
    res.send('设置session');
});

//设置好之后，req.session中的结构
req.session = {
    isLogin: true,
    userInfo: {user_id:10001, user_name:"zs"}
}

4.3 session有效期

当浏览器关闭后，session消失
express-session会将session保存在内存中，每次重启服务器时即使没有关闭浏览器session也会消失

4.4 删除session

核心： req.session.destroy() 销毁所有session

4.5 session 的有效范围

在一个网站中设置了session，则整个网站都能找到这个session

5. 登录功能完善

核心：登录成功后注册session信息，在每个页面中检测session是否存在

思路：

在 /checkLogin 中，当正常登录以后将用户信息和已登录状态记录到session中
在其他路由监听中增加session检测的步骤，除了 /login 和 /checkLogin

注意： session时需要使用到 express-session模块，首先要加载该模块并注册为中间件

代码实现：

在 app.js 中加载express-session模块，并注册为中间件

image.png

在 /checkLogin 中，当正常登录以后将用户信息和已登录状态记录到session中

image.png

在其他路由中检测session（就是检测 session.isLogin是否为true）

image.png

6. cookie和session的原理

6.1 cookie原理

浏览器第一次访问带有cookie设置的路由时，服务器会将cookie信息通过响应头返回给浏览器
之后浏览器每次访问服务器时都会将cookie信息通过请求头发送给服务器

6.2 session原理

image.png

浏览器第一次访问带有session设置的路由时，服务器会自动产生一个sessionId（一个很长的随机字符串），该sessionId有两个作用

① 随着cookie返回给浏览器，保存在浏览器中（==相当于一把钥匙==）

② 在服务器开辟一块内存并以该sessionId命名，将数据保存在该内存中（==相当于一个箱子==）

浏览器之后每一次访问服务器时，sessionId都会随着请求头发送给服务器，服务器就能根据sessionId

7. 中间件

7.1 什么是中间件

自来水生产流程：

image.png

d:/aaa/ABC.JPG：截取文件后缀并转为小写

image.png

上图中lastIndexOf、slice、toLowerCase几个方法就可以认为是中间件

中间件按顺序调用，对字符串 d:/aaa/ABC.JPG进行加工，得到最终的结果

Express是一种路由和中间件的Web框架，Express应用程序本质上是一系列中间件函数调用。

==express中间件是一个特殊的url地址处理函数==

该函数中有三个基本参数， req、res、next
req就是回调函数中的req对象
res就是回调函数中的res对象
next：当该中间件执行完成后自动进入下一个中间件

7.2 自定义中间件

案例1：记录日志中间件

目标：每当浏览器输入地址访问时，就将当前访问的url和时间保存到 run.log 文件中

在每个路由监听中使用fs.appendFile将url地址和时间记录到run.log文件中

image.png

缺点：每个路由监听中都要使用fs写文件，非常麻烦

将写run.log的方法封装为一个函数

image.png

将writeLog封装为中间件函数，并注册为中间件

image.png

案例2：自定义url检测中间件，不存在的url地址直接显示 404 not found

image.png

7.3 图例中间件工作原理

image.png

7.4 检测登录状态中间件

方法：在每个路由中都要检测 isLogin 的状态，除了 /login 和 /checkLogin

image.png

7.5 中间件类别

express有五中类别的中间件：

应用级别的中间件：挂载到 app 上的中间件，例如：app.use()
路由级别的中间件：挂载到 router 对象上的中间件，例如：router.get()、 router.post
错误级别的中间件：回调函数中，有四个参数 app.use((err, req, res, next)=>{})
内置中间件： express.static() ， express提供的唯一内置中间件
第三方中间件：非express框架提供的，需要程序员手动安装才能使用的中间件；body-parser 解析post 表单数据

node-session-cookie--9

1. 登录

2. 会话控制概述

3. cookie技术

3.1 什么是cookie

3.2 设置cookie

3.3 读取cookie

3.4 cookie有效期

4. session技术

4.1 session介绍

4.2 设置/读取session

4.3 session有效期

4.4 删除session

4.5 session 的有效范围

5. 登录功能完善

6. cookie和session的原理

6.1 cookie原理

6.2 session原理

7. 中间件

7.1 什么是中间件

7.2 自定义中间件

7.3 图例中间件工作原理

7.4 检测登录状态中间件

7.5 中间件类别

猜你喜欢

热点阅读