35：登录验证和文件上传

登录验证和文件上传是Web应用程序中常见的功能之一。下面是关于登录验证和文件上传的一些要点：

登录验证：
登录验证是确保用户身份合法性和保护用户数据安全的重要步骤。以下是一些关于登录验证的要点：

1. 用户认证：用户在登录时需要提供凭据（如用户名和密码），应用程序需要验证提供的凭据是否与存储的用户凭据匹配，以确定用户身份的合法性。
2. 安全性：登录验证应该使用安全的方法，如使用密码哈希和盐值进行存储和比对，以防止密码泄露和暴力破解。
3. 会话管理：一旦用户通过验证，应用程序应该为用户创建一个会话，并为其分配一个唯一的会话标识符（如Session ID），以便在用户与应用程序之间进行身份验证和状态管理。

文件上传：
文件上传允许用户将文件从客户端上传到服务器端。以下是一些关于文件上传的要点：

1. 安全性：文件上传应该进行适当的验证和过滤，以确保上传的文件类型和大小符合应用程序的要求，并防止恶意文件的上传和执行。
2. 存储管理：上传的文件应该被正确地存储在服务器端，可以选择将文件存储在文件系统中或使用云存储服务。同时，应该考虑文件的命名规则和目录结构，以便管理和检索文件。
3. 错误处理：文件上传过程中可能会发生各种错误，如网络中断、文件过大等。应该提供适当的错误处理机制，向用户显示有意义的错误信息，并允许用户重新上传文件。

综上所述，登录验证和文件上传是构建安全和功能丰富的Web应用程序的重要组成部分。通过合适的登录验证和文件上传机制，可以确保用户身份的合法性和保护用户上传文件的安全性。

一、项目规划

1. 前端

• • ajax作为前端和后端交互的入口
  • ajax提交之后会请求目标地址
  • 目标地址会处理之后响应数据给前端
  • 前端接收到响应数据，渲染到页面结构

1. 后端

• • 创建服务对象并挂载到指定端口
  • 静态资源处理中间件
  • 解析body数据中间件
  • 功能路由
• • • 封装自定义功能模块
    • 注意模块的暴露和引入方式
    • 注意自定义模块的功能，参数，返回值

1. 功能

• • 注册
  • 登录
  • 需要验证登录信息的测试功能（查看个人信息）
  • 文件上传

二、注册

1. 前端

• • ajax，提交注册信息到后端接口
  • 接收响应数据，解析json，做出前端提示

1. 后端

• • 创建注册路由
  • 接收前端提交信息
  • 根据接收到的用户数据，查询数据库中是否已经存在
  • 根据查询结果：
• • • 存在，提示注册失败，用户名重复
    • 不存在，写入数据库，提示注册成功

1. 数据库

• • 设计集合结构，创建集合对象，暴露集合对象
  • 操作集合中的数据（读，写）

三、登录

1. 前端

• • ajax，提交登录信息到后端接口
  • 接收响应数据，解析json，做出前端提示

1. 后端

• • 创建登录路由
  • 接收前端提交信息
  • 根据接收到的数据，查询数据库中是否存在
• • • 不存在：登录失败，用户信息不存在
    • 存在：验证密码是否一致
• • • • 不一致，密码错误
      • 一致，成功
• • • • • 修改登录状态

四、状态存储技术

1. cookie

• • 一般用在前后端不分离的项目
  • 前端发起登录，后端提示登录成功，同时后端生成一个状态信息，存储到cookie。下次前端需要进行登录验证时，会自动携带cookie请求后端，后端接收到cookie，解析cookie，验证cookie，以此判断当前前端的登录信息是否失效。
  • 后端生成状态，后端存储，后端解析，后端验证
  • 原生技术，不需要依赖第三方模块，但是解析cookie需要使用cookie-parser中间件

1. session

• • 一般用在前后端不分离的项目
  • 使用流程参考cookie，只是对状态信息进行加密，或限时等约束。
  • 后端生成状态，后端存储，后端解析，后端验证
  • 依赖第三方模块：express-session

1. token

• • 一般用在前后端分离的项目
  • 前端发起登录，后端提示登录成功，同时后端生成一个状态信息，将状态信息响应给前端，由前端决定如何存储（cookie，localStorage，sessionStorage，本地文件），由前端决定何时携带，后端接收到状态信息后，解析状态，验证状态，以此判断当前前端的登录信息是否失效。
  • 后端生成状态，前端存储，后端解析，后端验证
  • 依赖第三方模块：jsonwebtoken
• • • jwt

五、状态存储 - session

1. 下载session模块：npm install express-session
2. 配置session信息：

app.use(session({
  secret: '加密字段',   // 加密信息，可以随便写
  resave: false,      // 强制保存session，默认为true，建议设置为false
  saveUninitialized: true,    // 强制将未初始化的session存储，默认为true，建议为true
  cookie: { maxAge: 1000 * 30 * 60 }    // 过期时间，毫秒数
}))

1. 存：req.session.isLogin = "ok";
2. 读：req.session.isLogin

六、token的使用

1. 安装第三方模块 - jsonwebtoken

• • npm i jsonwebtoken -S

1. 生成token

const jwt = require("jsonwebtoken");
// 参数1：要存储的数据
// 参数2：加密因子
// 参数3：有效期时间
const token = jwt.sign({
    userId: data.id
}, "千锋H5", {
    expiresIn: 7 * 24 * 60 * 60
});

// 将token返回给前端请求

1. 验证token

jwt.verify(token, "千锋H5", (err, data)=>{
    if(err){ reject('token 验证失败')}
    console.log(data)
})

七、文件上传 - multer

1. 通过前端表单中的 file 文件框，选择文件并提交到指定后端接口

• 利用表单自带的提交功能

• • 需要给form标签添加自定义属性：enctype="multipart/form-data"

• 利用XMLHttpRequest发送

• • 需要先将表单数据处理成formData：const fd = new FormData(formEle);
  • 使用xhr的send方法直接发送：xhr.send(fd)

2. 后端接收到文件信息

1. 下载：npm i multer -S
2. 引入：const multer = require("multer");
3. 创建multer实例：const upload = multer({ dest: "文件存储路径" });
4. 注册multer中间件：app.use(upload.any());

• • any方法，可以接收任意文件

1. 文件传输需定义为post请求，request对象新增files属性，用于保存文件对象数组，对象内属性有：

• • fieldname: 表单name名
  • originalname: 上传的文件名
  • encoding： 编码方式
  • mimetype: 文件类型
  • destination: 保存路径
  • filename： 保存后的文件名 不含后缀
  • path： 保存磁盘路径+保存后的文件名 不含后缀
  • size：尺寸

1. multer会自动将文件转存到指定位置，但文件名默认随机生成，且无扩展名，需要使用node内置模块fs模块修改文件名
2. 使用response对象向前端返回服务器文件路径

• • http://服务器地址:端口/文件全名

3. 导入excel数据

• • 下载：npm i node-xlsx
  • 引入：const xlsx = require("node-xlsx");
  • 使用：const excelData = xlsx.parse("excel文件的绝对路径");
  • 处理并解析数据

注意：

1. 当前计算机文件系统协议（静态资源）

• • file:///Users/liyang/Desktop/sh2205/code/day25/www/register.html

1. 超文本传输协议（服务器）

• • http://localhost:3000/register.html

1. 将对象转成字符

• • JSON.stringify(obj);

1. 将符合对象语法的字符转成对象

• • JSON.parse(str);

1. 注意：JSON对象的转换方法不能识别对象中的函数（被忽略），undefined（被忽略），NaN（会转成null）
2. 项目环境迁移注意事项

• • 项目迁移时不涵盖node_modules目录
  • 迁移到新位置后，在新项目的根目录内执行npm i下载所有依赖
• • • 前提：具备原项目的package.json文件

1. 注意看报错
2. 注意引入自定义模块时的路径写法