前后端的身份认证 - JWT 认证机制

NewBoy
752 阅读6分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第21天，点击查看活动详情。

session 认证的局限性

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

  • 注意

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

什么是 JWT

JWT(Json web token) 是目前最流行的跨域认证解决方案

JWT 的工作原理

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

Snip20220421_54.png

JWT 的组成部分

  • JWT 通过由三部分组成，分别是 Header（头部）、Payload（有效荷载）、Signature（签名）。三者之间使用英文的 . 分隔

    Header.Payload.Signature

  • JWT 的三部分各自代表的含义

    • Payload（有效荷载）：真正的用户信息，它是用户经过加密之后生成的字符串
    • Header（头部）和 Signature（签名）：安全性相关的部分，只为了保证 Token 的安全性

JWT 的使用方式

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

Authorization: Bearer <token>

在 Express 中的使用 JWT

安装 JWT 相关的包

  • 运行以下命令，安装 jsonwebtoken(8.5.1) 和 express-jwt (7.4.2) 包 
    npm install jsonwebtoken express-jwt
  • 包的作用

    • jsonwebtoken 用于生成 JWT 字符串

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

导入 JWT 相关的包

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

// 导入用于生成 JWT 字符串的包
const jwt = require('jsonwebtoken')

// 导入用于将客户端发送过来的 JWT 字符串，解析还原成 JSON 对象的包
var { expressjwt: expJWT } = require("express-jwt")

定义 secret 秘钥

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

  • 当生成 JWT 字符串的时候，需要使用 secret 秘钥对用户信息进行加密，最终得到加密好的 JWT 字符串
  • 当把 JWT 字符串解析还原成 JSON 对象的时候，需要使用 secret 秘钥进行解密
const secretKey = 'studyNode No1 ^_^'

在登录成功后生成 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 的有效期）
    // 注意: 千万不要将密码加密到 token 字符串中
    // 为了方便客户端使用 Token，在服务器端直接拼接上 Bearer 的前缀
    const tokenStr = jwt.sign({username:userinfo.username}, secretKey, {expiresIn: '30s'})

    res.send({
        status: 200,
        message: '登录成功！',
        token: 'Bearer ' + tokenStr
    })
})

  • 通过postman 请求返回的内容 Snip20220422_2.png

将 JWT 字符串还原为 JSON 对象

客户端每次在访问那些有权限接口的时候，都需要主动通过请求头中的 Authorization 字段，将 Token 字符串发送到服务器进行身份认证。此时，服务器可以通过 express-jwt 这个中间件，自动将客户端发送过来的 Token 解析还原成 JSON 对象

// 使用 app.use() 来注册中间件
// secret: secretKey：  用来解析 Token 的中间件
// algorithms: ["HS256"]: 加密格式
// .unless({ path:[/^\/api\//] }：用来指定哪些接口不需要访问权限

app.use(
    expJWT({
        secret: secretKey,
        algorithms: ["HS256"],
    }).unless({ path:[/^\/api\//] })
)

使用 req.auth 获取用户信息

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

  • 如果没有配置这个中间件，req 下是没有 auth 这个字段的

  • req.auth 可以获取哪些信息取决于我们加密了哪些信息

  • 示例

    // 这是一个有权限的 API 接口
app.get('/admin/getinfo', function (req, res) {

    // 使用 req.authuser 获取用户信息，并使用 data 属性将用户信息发送给客户端
    console.log(req.auth)

    res.send({
        status: 200,
        message: '获取用户信息成功！',
        data: req.auth // 要发送给客户端的用户信息
    })
})

  • 通过postman 请求返回的内容

    • username 是我们加密的内容
    • iat 和 exp 是用来控制 Token 有效期的

    Snip20220422_1.png

捕获解析 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: '未知错误'
    })
})

完整的示例（express-jwt 的版本7.4.2, jsonwebtoken 的版本8.5.1）

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

// 第一步：安装并导入 JWT 相关的两个包，分别是 jsonwebtoken 和 express-jwt
const jwt = require('jsonwebtoken')
var { expressjwt: expJWT } = require("express-jwt");

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

// 解析 post 表单数据的中间件
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))


// 第二步：定义 secret 密钥，建议将密钥命名为 secretKey
const secretKey = 'studyNode No1 ^_^'


// 第四部：注册将 JWT 字符串解析还原成 JSON 对象的中间件
app.use(
    expJWT({
        secret: secretKey,
        algorithms: ["HS256"],
    }).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: '登录失败！'
        })
    }

    // 登录成功
    // 第三步：在登录成功之后，调用 jwt.sign() 方法生成 JWT 字符串。并通过 token 属性发送给客户端
    const tokenStr = jwt.sign({username:userinfo.username}, secretKey, {expiresIn: '10h'})

    res.send({
        status: 200,
        message: '登录成功！',
        token: tokenStr
    })
})


// 这是一个有权限的 API 接口
app.get('/admin/getinfo', function (req, res) {

    // 第五步：使用 req.authuser 获取用户信息，并使用 data 属性将用户信息发送给客户端
    console.log(req.auth)
    
    res.send({
        status: 200,
        message: '获取用户信息成功！',
        data: req.auth, // 要发送给客户端的用户信息
    })
})

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

    // 其他错误
    res.send({
        status: 500,
        message: '未知错误'
    })
})


// 调用 app.listen 方法，指定端口号并启动web服务器
app.listen(8888, function () {
    console.log('express 服务器运行在 http://127.0.0.1:8888')
})
avatar
文章
阅读
粉丝