使用 JWT 实现前后端身份验证

身份验证是构建安全和可靠应用程序的重要组成部分。JSON Web Token（JWT）是一种用于在前后端之间传递安全信息的开放标准。在本文中，我们将探讨如何使用 JWT 实现前后端身份验证。

什么是 JWT？

JWT 是一个基于 JSON 的令牌，由三个部分组成：头部、载荷和签名。头部和载荷都是基于 JSON 对象，并使用 Base64 编码。头部包含了令牌的类型和使用的签名算法，载荷包含了需要传递的用户信息和其他信息。签名用于验证令牌的真实性。

使用 JWT 进行身份验证的步骤

以下是使用 JWT 进行身份验证的基本步骤：

步骤 1：用户登录

用户在应用程序中进行登录时，其凭据将被验证。一旦凭据验证通过，将生成一个包含用户信息的 JWT。

步骤 2：JWT 传递给客户端

生成的 JWT 将发送给客户端，并存储在本地，例如在浏览器的 localStorage 中。

步骤 3：客户端将 JWT 发送给服务器

在每个后续请求中，客户端将 JWT 通过请求头或其他方式发送到服务器。

步骤 4：服务器验证 JWT

服务器通过验证接收到的 JWT，以确保其真实性和完整性。如果 JWT 通过验证，服务器将根据其中的用户信息对请求进行授权。

实现 JWT 身份验证的示例

下面是一个简单的示例，演示了如何使用 JWT 进行前后端身份验证。我们将使用 Node.js 和 Express 框架进行后端实现，并使用前端的 Fetch API 进行请求和响应。

后端实现

以下是后端实现的关键代码：

// 导入依赖
const express = require('express');
const jwt = require('jsonwebtoken');

// 创建 Express 实例
const app = express();

// 密钥，用于签名和验证 JWT
const secretKey = 'your-secret-key';

// 登录路由
app.post('/login', (req, res) => {
  // 假设 validateCredentials 是用于验证凭据的函数
  const username = req.body.username;
  const password = req.body.password;

  if (validateCredentials(username, password)) {
    // 生成 JWT
    const token = jwt.sign({ username: username }, secretKey);
    res.json({ token: token });
  } else {
    res.status(401).json({ error: 'Invalid credentials' });
  }
});

// 受保护的路由
app.get('/protected', authenticateToken, (req, res) => {
  // 通过身份验证的用户才能访问该路由
  res.json({ message: 'Protected resource' });
});

// 身份验证中间件
function authenticateToken(req, res, next) {
  // 从请求头中提取 JWT
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];
  
  if (token == null) {
    return res.sendStatus(401);
  }
  
  // 验证 JWT
  jwt.verify(token, secretKey, (err, user) => {
    if (err) {
      return res.sendStatus(403);
    }
  
    // 将用户信息附加到请求对象中
    req.user = user;
    
    next();
  });
}

// 启动服务器
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

前端实现

以下是前端实现的关键代码：

// 用户登录函数
function login(credentials) {
  return fetch('/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(credentials)
  }).then(response => response.json());
}

// 受保护资源请求函数
function getProtectedResource(token) {
  return fetch('/protected', {
    headers: {
      'Authorization': 'Bearer ' + token
    }
  }).then(response => response.json());
}

// 示例代码
const credentials = {
  username: 'admin',
  password: 'password'
};

login(credentials)
  .then(data => {
    // 存储 JWT 或其他方式
    const token = data.token;
  
    // 使用 JWT 请求受保护的资源
    getProtectedResource(token)
      .then(data => {
        console.log(data);
      })
      .catch(error => {
        console.error(error);
      });
  })
  .catch(error => {
    console.error(error);
  });

结论

使用 JWT 实现前后端身份验证可以为应用程序提供简单而安全的身份验证机制。通过在 JWT 中存储用户信息，可以轻松地在前后端之间传递信息，而无需维护会话或在服务器端存储用户状态。然而，开发人员应该密切关注 JWT 的安全性，并采取适当的措施来保护其机密性和完整性。

本文来自极简博客，作者：星河之舟，转载请注明原文链接：使用 JWT 实现前后端身份验证