1. Web开发模式
1.1 服务端渲染的Web开发模式
 优点:  缺点: 
1.2 前后端分离的Web开发模式
 优点:  缺点: 
2. 身份认证

2.1 Session 认证机制
2.1.1 Cookie
cookie是存在浏览器的一段字符串,是键值对。 
2.1.2 Cookie在身份认证中的作用
 
2.1.3 Session的工作原理

2.2 在Express中使用Session认证
2.2.1 安装express-session中间件
命令:
npm install express-session
2.2.2 配置express-session中间件
express-session中间件安装成功后,需要通过app.use()来注册session中间件:
const express = require('express')
const app = express()
const session = require('express-session')
app.use(session({
secret: 'tbtest',
resave:false,
saveUninitialized: true
}))
2.2.3 向session中存数据
当配置成功后即可通过req.session 来访问和使用session对象,从而存储用户的关键信息: 
2.2.4 从session中取数据

2.2.5 清空session
req.session.destroy()
通常退出登录时使用该函数。 
2.3 JWT认证机制
JWT:(JSON web Token)是目前最流行的跨域认证解决方案。
  工作原理:

2.3.1 JWT组成部分
 
2.3.1 JWT的使用方式

2.4 在Express中使用JWT
2.4.1 安装JWT
命令如下:
npm install jsonwebtoken express-jwt
其中: jsonwebtoken 用于生成JWT字符 express-jwt 用于将JWT字符串解析还原成JSON对象
2.4.2 导入JWT
const jwt = require('jsonwebtoken')
const expressJWT = require('express-jwt')
2.4.3 定义secret密钥
防止JWT字符串被人破解,我们需要定义一个用于加密和解密的secret密钥。 secret密钥的本质是一个字符串,例如:
const secretKey = 'tbtest hahaha >_<'
2.4.4 在登录成功后生成JWT字符串
调用jsonwebtoken提供的sign()方法将用户信息加密成JWT字符串:  expiresIn: ‘30s’ : token有效期
2.4.5 将JWT字符串还原为JSON对象
 只要配置成功了express-jwt这个中间件,就可以把解析出来的用户信息挂载到req.user属性上。
2.4.6 捕获解析JWT失败后产生的错误

|