nodejs学习笔记-09前后端的身份认证

Estella30
140 阅读10分钟

1.web开发模式

目前主流的web开发模式有两种，分别是：

  1. 基于服务端渲染的传统web开发模式
  2. 基于前后端分离的新型web开发模式

1.1 服务端渲染的web开发模式

服务端渲染的概念:服务器发送给客户端的HTML页面,是在服务器通过字符串的拼接,动态生成的,因此客户端不需要使用Ajax这样的技术额外请求页面的数据

服务端渲染的优缺点:

  • 优点
    1. 前端耗时少,因为服务端负责动态生成HTML内容,浏览器只需要直接渲染页面即可,尤其是移动端,更省电
    2. 有利于SEO,因为服务端响应的是完整的HTML页面内容,所以爬虫更容易获取信息,更有利于SEO
  • 缺点
    1. 占用服务器端资源,即服务端完成HTML页面内容的拼接,如果请求较多,会对服务器造成一定的访问压力
    2. 不利于前后端的分离,开发效率低使用服务端渲染,则无法进行分工合作,尤其对于前端复杂度高的项目,不利于项目高效开发

1.2 前后端分离的web开发模式

前后端分离的概念:前后端分离的开发模式,依赖于Ajax技术的广泛应用.简而言之,前后端分离的web开发模式,就是后端只负责提供api接口,前端使用Ajax调用接口的开发模式

前后端分离的优缺点:

  • 优点
    1. 开发体验好,前端专注于UI页面的开发,后端专注于api的开发,且前端有更多的选择性
    2. 用户体验好,Ajax技术的广泛应用,极大的提高了用户的体验,可以轻松实现页面的局部刷新
    3. 减轻了服务器端的渲染压力,因为页面最终是在每个用户的浏览器中生成的
  • 缺点
    1. 不利于SEO,因为完整的HTML页面需要在客户端动态拼接完成,所以爬虫就无法爬取页面的有效信息(解决方案:利用Vue,React等前端框架的SSR(server side render)技术能够很好的解决SEO问题!)

1.3 如何选择web开发模式

不谈业务场景而盲目选择使用何种开发模式都是耍流氓

  • 比如企业级网站,主要功能是展示而没有复杂的交互,并且需要良好的SEO,则这时我们就需要使用服务器端渲染
  • 而类似于后台管理项目,交互性比较强,不需要考虑SEO,那么就可以使用前后端分离的开发模式

另外,具体使用何种开发模式并不是绝对的,为了同时兼顾上首页的渲染速度和前后端分离的开发效率,一些网站采用了首屏服务器端渲染 + 其他页面前后端分离的开发模式

2.身份认证

身份认证(Authentication)又称身份验证、鉴权，是指通过一定的手段,完成对用户身份的确认

  • 日常生活中的身份认证随处可见,比如高铁的验票乘车,手机的密码或指纹解锁,支付宝或微信的支付密码等等
  • 在Web开发中,也涉及到用户身份的认证,例如:各大网站的手机验证码登录,邮箱密码登录,二维码登录等

为什么需要身份认证?? 为了确认当前所声称为某种身份的用户确实是所声称的用户

不同开发模式下的身份认证: 对于服务端渲染和前后端分离这两种开发模式来说,分别有着不同的身份认证方案

  1. 服务端渲染推荐使用Session认证机制
  2. 前后端分离推荐使用JWT认证机制

3. Session认证机制

3.1HTTP协议的无状态性

HTTP协议的无状态性,指的是客户端的每次HTTP请求都是独立的,连续多个请求之间没有直接的关系,服务器不会主动保留每次HTTP请求的状态

3.2如何突破HTTP无状态的限制---------cookie

cookie是存储在用户浏览器中的一段不超过4kb的字符串,它由一个名称(name),一个值(value)和其它几个用于控制cookie的有效期,安全性,使用范围的可选属性组成

不同域名下的cookie各自独立,每当客户端发起请求时,会自动把当前域名下的所有未过期的cookie一同发送到服务器

cookie的几大特性: 自动发送, 域名独立, 过期时限, 4KB限制

cookie在身份认证中的作用

客户端第一次请求服务器的时候,服务器通过响应头的形式,向客户端发送一个身份认证的cookie,客户端会自动将cookie保存在浏览器中,

随后 当客户端浏览器每次请求服务器的时候,浏览器会自动将身份认证相关的cookie,通过请求头的形式发送给服务器,服务器即可验明客户端的身份

image.png 注意:由于cookie是存储在浏览器中的,而且浏览器也提供了读写cookie的api,因此cookie很容易被伪造,不具有安全性,因此不建议服务器将重要的隐私数据(比如用户的身份信息,密码等等),通过cookie的形式发送给浏览器

3.3Session的工作原理

image.png

3.4 在express中使用Session认证

  1. 安装express-session中间件( npm install express-session)
  2. 配置express-session中间件,使用app.use()来注册session中间件
// TODO_01：请配置 Session 中间件
const session = require("express-session");
app.use(
  session({
    secret: "StephenCurry", // secret属性可以写任意的字符串
    resave: false, // 固定写法
    saveUninitialized: true, // 固定写法
  })
);
  1. 向session中存数据 当express-session中间件配置成功后,即可通过req.session来访问和使用session对象,从而存储用户的关键信息
// 注意:只有成功配置了express-session 这个中间件之后,才能够通过req点出来session这个属性
req.session.user = req.body // 将用户的信息,存储到Session中
req.session.isLogin = true // 将用户的登录状态,存储到Session中
  1. 从session中取数据,可以直接从req.session对象上获取之前存储的数据
  2. 清空session: 调用req.session.destroy()函数,即可清空服务器保存的session信息

4.JWT认证机制-了解token的原理

session认证的局限性: session认证机制需要配合cookie才能实现,由于cookie默认不支持跨域访问,所以,当涉及到前端跨域请求后端接口的时候,需要做很多额外的配置,才能实现跨域session认证

注意:

  • 当前端请求后端接口不存在跨域问题的时候,推荐使用Session身份认证机制
  • 当前端需要跨域请求后端接口的时候,不推荐使用session身份认证机制,推荐使用JWT认证机制

JWT(JSON Web Token)是目前最流行的跨域认证解决方案

4.1JWT的工作原理

image.png

总结:用户的信息通过Token字符串的形式,保存在客户端浏览器中,服务器通过还原Token字符串的形式来认证用户的身份

4.2JWT的组成部分

JWT通常由三部分组成,分别是Header(头部),Payload(有效荷载),Signature(签名) 三者之间使用英文的"."分割,格式如下:header.payload.signature 三部分各自代表的含义:

  • Payload部分才是真正的用户信息,它是用户信息经过加密之后生成的字符串
  • Header和Signature是安全性相关的部分,只是为了保证Token的安全性

4.3JWT的使用方式

客户端收到服务器返回的JWT之后,通常会将它存储在localStorage或sessionStorage中,此后客户端每次与服务器通信,都要带上JWT的字符串,从而进行身份的认证,推荐做法是将JWT放在HTTP请求头的Authorization字段中,格式如下:

Authorization:Bearer <token>

4.4在express中使用JWT

  1. 安装JWT相关的包,运行如下命令,安装如下两个JWT相关的包
npm install jsonwebtoken express-jwt
// jsonwebtoken 用于生成JWT字符串
// express-jwt 用于将JWT字符串解析还原成JSON对象
  1. 导入JWT相关的包,使用require函数,分别导入JWT相关的两个包
const jwt = require('jsonwebtoken')
const expressJWT = require('express-jwt')
  1. 定义secret密钥:为了保证JWT字符串的安全性,防止JWT字符串在网络传输过程中被别人破解,所以需要专门定义一个用于加密和解密的secret密钥:
    • 当生成JWT字符串的时候,需要使用secret密钥对用户的信息进行加密,最终得到加密好的JWT字符串
    • 当把JWT字符串解析还原成JSON对象的时候,需要使用secret密钥进行解密
    // secret本身就是一个字符串
const secretKey = 'StephenCurry No1 ^_^'
  2. 在登录成功后生成JWT字符串: 调用jsonwebtoken包提供的sign()方法,将用户的信息加密成JWT字符串,响应给客户端
// 登录接口
app.post('/api/login', function (req, res) {
  // 将 req.body 请求体中的数据，转存为 userinfo 常量
  const userinfo = req.body
  // 登录失败
  if (userinfo.username !== 'admin' || userinfo.password !== '000000') {
    return res.send({
      status: 400,
      message: '登录失败！',
    })
  }
  // 登录成功
  // 在登录成功之后，调用 jwt.sign() 方法生成 JWT 字符串。并通过 token 属性发送给客户端
  // 参数1：用户的信息对象
  // 参数2：加密的秘钥
  // 参数3：配置对象，可以配置当前 token 的有效期
  // 记住：千万不要把密码加密到 token 字符中
  const tokenStr = jwt.sign({ username: userinfo.username }, secretKey, { expiresIn: '30s' })
  res.send({
    status: 200,
    message: '登录成功！',
    token: tokenStr, // 要发送给客户端的 token 字符串
  })
})
  1. 将JWT字符串还原为JSON对象:客户端每次在访问那些有权限接口的时候,都需要主动通过请求头中的Authorization字段,将token字符串发送到服务器进行身份认证,此时,服务器通过express-jwt这个中间件,自动将客户端发送过来的token解析还原成JSON对象
// 定义 secret 密钥，建议将密钥命名为 secretKey
const secretKey = 'StephenCurry No1 ^_^'

// 注册将 JWT 字符串解析还原成 JSON 对象的中间件
// 注意：只要配置成功了 express-jwt 这个中间件，就可以把解析出来的用户信息，挂载到 req.user 属性上
// expressJWT({ secret: secretKey } 用来解析Token的中间件
// .unless({ path: [/^\/api\//] })) 用来指定哪些接口不需要访问权限
app.use(expressJWT({ secret: secretKey }).unless({ path: [/^\/api\//] }))

6.使用req.user获取用户信息 当express-jwt这个中间件配置成功之后,即可在那些有权限的接口中,使用req.user对象,来访问JWT字符串中解析出来的用户信息了

// 这是一个有权限的 API 接口
// 注意:只要配置成功了express-jwt这个中间件,就可以把解析出来的用户信息挂载在req.user属性上
app.get('/admin/getinfo', function (req, res) {
  //使用 req.user 获取用户信息，并使用 data 属性将用户信息发送给客户端
  console.log(req.user)
  res.send({
    status: 200,
    message: '获取用户信息成功！',
    data: req.user, // 要发送给客户端的用户信息
  })
})
  1. 捕获解析JWT失败后产生的错误:当使用express-jwt解析token字符串时,如果客户端发送过来的Token字符串过期或者不合法,会产生一个解析失败的错误,影响项目的正常运行,我们可以通过Express的错误中间件,捕获这个错误并进行相关的处理
//使用全局错误处理中间件，捕获解析 JWT 失败后产生的错误
app.use((err, req, res, next) => {
  // 这次错误是由 token 解析失败导致的
  if (err.name === 'UnauthorizedError') {
    return res.send({
      status: 401,
      message: '无效的token',
    })
  }
  res.send({
    status: 500,
    message: '未知的错误',
  })
})
avatar
文章
阅读
粉丝