JWT身份认证的使用方式

目录

前言

1、JWT的概述说明

2.JWT的组成部分

3. JWT 的使用方式

  3.1.安装并导入 JWT 相关的包

  3.2.定义 secret 密钥

  3.3 .在登录成功后生成 JWT 字符串

  3.4.将 JWT 字符串还原为 JSON 对象

  3.5.使用 req.user 获取用户信息

  3.6.捕获解析 JWT 失败后产生的错误

---

前言

身份认证是指通过一定的方法，完成对用户身份的确认，比如手机验证码登录、邮箱密码登录、二维码登录

身份认证的目的：为了确认当前所声称为某种身份的用户，确实是所声称的用户

对于前后端分离这两种开发模式来说: 推荐使用 JWT 认证机制

1、JWT的概述说明

JWT（英文全称：JSON Web Token）是目前最流行的跨域认证解决方案

1.用户的信息通过 Token 字符串的形式，保存在客户端浏览器中

2.服务器通过还原 Token字符串的形式来认证用户的身份

2.JWT的组成部分

1. JWT 通常由三部分组成，按顺序分别是 Header（头部）、Payload（有效荷载）、Signature（签名）

2. 三者之间使用英文的“ . ”分隔，格式：

Header.payload.Signature

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

3. JWT 的使用方式

1. 客户端收到服务器返回的 JWT 之后，通常会将它储存在 localStorage 或 sessionStorage 中

2. 此后，客户端每次与服务器通信，都要带上这个 JWT 的字符串，从而进行身份认证。推荐的做法是把JWT 放在 HTTP 请求头的 Authorization 字段中

  3.1.安装并导入 JWT 相关的包

 1.运行命令，安装两个JWT相关的包

npm install jsonwebtoken express-jwt

2.导入 JWT 相关的包 使用 require() 函数，分别导入 JWT 相关的两个包

//导入jsonwebtoken
const jwt = require('jsonwebtoken')

//导入expressJWT解析token
const expressJWT = require('express-jwt')

  3.2.定义 secret 密钥

1. 为了保证 JWT字符串的安全性，防止 JWT 字符串在网络传输过程中被别人破解，我们需要专门定义一个用于加密和解密的 secret 密钥
2. 当生成 JWT 字符串的时候，需要使用 secret 密钥对用户信息进行加密，最终得到加密好的 JWT 字符串
3. 当把 JWT 字符串解析还原成 JSON 对象的时候，需要使用 secret 密钥进行解密

// 导入 express 模块
const express = require('express')
// 创建 express 的服务器实例
const app = express()

//安装并导入 JWT 相关的两个包，分别是 jsonwebtoken 和 express-jwt
const jwt = require('jsonwebtoken')
const expressJWT = require('express-jwt')

// 允许跨域资源共享
const cors = require('cors')
app.use(cors())

// 托管静态页面
app.use(express.static('./pages'))
// 解析 POST 提交过来的表单数据
app.use(express.urlencoded({ extended: false }))

// TODO_02：定义 secret 密钥，建议将密钥命名为 secretKey
const secretKey = 'yasuo No1'


// 调用 app.listen 方法，指定端口号并启动web服务器
app.listen(80, function () {
  console.log('Express server running at http://127.0.0.1:80')
})

  3.3 .在登录成功后生成 JWT 字符串

调用 jsonwebtoken 包提供的 sign() 方法，将用户的信息加密成 JWT 字符串，响应给客户

// 导入 express 模块
const express = require('express')
// 创建 express 的服务器实例
const app = express()

// TODO_01：安装并导入 JWT 相关的两个包，分别是 jsonwebtoken 和 express-jwt
const jwt = require('jsonwebtoken')
const expressJWT = require('express-jwt')

// 允许跨域资源共享
const cors = require('cors')
app.use(cors())

// 托管静态页面
app.use(express.static('./pages'))
// 解析 POST 提交过来的表单数据
app.use(express.urlencoded({ extended: false }))

// TODO_02：定义 secret 密钥，建议将密钥命名为 secretKey
const secretKey = 'yasuo No1'

// 登录接口
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: '登录失败！',
    })
  }
  // 登录成功
  // TODO_03：在登录成功之后，调用 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 字符串
  })
})


// 调用 app.listen 方法，指定端口号并启动web服务器
app.listen(80, function () {
  console.log('Express server running at http://127.0.0.1:80')
})

  3.4.将 JWT 字符串还原为 JSON 对象

1. 客户端每次在访问那些有权限接口的时候，都需要主动通过请求头中的 Authorization 字段，将 Token 字符串发送到服务器进行身份认证

2. 然后服务器可以通过 express-jwt 这个中间件，自动将客户端发送过来的 Token 解析还原成 JSON 对象

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

  3.5.使用 req.user 获取用户信息

// 这是一个有权限的 API 接口
app.get('/admin/getinfo', function (req, res) {
  // TODO_05：使用 req.user 获取用户信息，并使用 data 属性将用户信息发送给客户端
  res.send({
    status: 200,
    message: '获取用户信息成功！',
    data: req.user, // 要发送给客户端的用户信息
  })
})

  3.6.捕获解析 JWT 失败后产生的错误

如果express-jwt 解析 Token 字符串时，客户端发送过来的 Token 字符串过期或不合法，会产生一个解析失败的错误，可以通过 Express 的错误中间件，捕获这个错误并进行相关的处理

// TODO_06：使用全局错误处理中间件，捕获解析 JWT 失败后产生的错误
app.use((err, req, res, next) => {
  // 这次错误是由 token 解析失败导致的
  if (err.name === 'UnauthorizedError') {
    return res.send({
      status: 401,
      message: '无效的token',
    })
  }
  res.send({
    status: 500,
    message: '未知的错误',
  })
})