最佳jwt详细教程

先谈一谈为什么有Session认证机制还需要用到jwt认证机制。

1. Session 认证机制需要配合 Cookie 才能实现。由于 Cookie 默认不支持跨域访问，所以，当涉及到前端跨域请求后端接口的时候，需要做很多额外的配置，才能实现跨域 Session 认证

2. 注意：

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

   • 前端需要跨域请求后端接口的时候，不推荐使用 Session 身份认证机制，推荐使用 JWT 认证机制

jwt概念：jwt全称：JSON Web token。是目前最流行的跨域认证解决方案

JWT的工作原理

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

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

 JWT的组成部分

1.jwt通常由三部分组成，分别是Header（头部），payload（有效荷载），signature（签名）

2.三者之间是通过使用英文“.”分隔，格式如下：

Header.Payload.Signature

3.下面是jwt字符串实例

 

4.JWT 的三个组成部分，从前到后分别是 Header、Payload、Signature

• Payload 部分才是真正的用户信息，它是用户信息经过加密之后生成的字符串

• Header 和 Signature 是安全性相关的部分，只是为了保证 Token 的安全性

 JWT的使用方式

1.客户端发送登录请求，服务器端会验证用户身份，验证成功服务器会响应一个基于该用户的token字符串给客户端，客户端会将这个token值存放在本地存储里面。

2.此后，客户端每次与服务器通信的时候，客户端只需要在请求头中添加这个token字符串，服务器就会进行身份验证了。

//请求头的Authorization字段中，后面Bearer与token字符串之间一定要用空格隔开
Authorization:Bearer <token>

安装并导入jwt相关的包

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

npm i jsonwebtoken express-jwt

2.其中 

        jsonwebtoken 用于生成 JWT 字符串

        express-jwt 用于将 JWT 字符串解析还原成 JSON 对象

3.导入jwt相关的包

//导入生成jwt字符串的包

const jwt = require('jsonwebtoken');

//导入将客户端发送过来的jwt字符串，还原解析为json格式对像的包

const expressJWT=require('express-jwt')

4.案例代码

// 导入 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 }))



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

定义secret密钥

为了保证 JWT字符串的安全性，防止 JWT 字符串在网络传输过程中被别人破解，我们需要专门定义一个用于加密和解密的 secret 密钥

• 当生成 JWT 字符串的时候，需要使用 secret 密钥对用户信息进行加密，最终得到加密好的 JWT 字符串

• 当把 JWT 字符串解析还原成 JSON 对象的时候，需要使用 secret 密钥进行解密

//密钥的本质：就是一个字符串

const secretKey='hellow world!'

登录成功后生成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 = 'itheima 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')
})

将jwt字符串还原为JSON对象

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

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

案例代码：

// 导入 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 = 'itheima No1 ^_^'

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

// 登录接口
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')
})

捕获解析jwt失败后产生的错误

1. 当使用 express-jwt 解析 Token 字符串时，如果客户端发送过来的 Token 字符串过期或不合法，会产生一个解析失败的错误，影响项目的正常运行

2. 可以通过 Express 的错误中间件，捕获这个错误并进行相关的处理