前端模拟token

原创已于 2025-06-25 13:56:12 修改 · 480 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-25 13:55:18 首次发布

在现代 Web 应用开发中，Token（令牌）作为一种安全的身份验证和授权机制，被广泛应用于用户登录后的身份标识和权限管理。它不仅能够帮助服务器快速识别用户身份，还能在一定程度上保障数据传输的安全性。本文将详细介绍如何使用CryptoJS库生成包含用户名称、登录密码以及失效时间的 Token，并深入解析其实现原理和代码逻辑。

一、CryptoJS 库简介

CryptoJS是一个功能强大且易于使用的 JavaScript 加密库，它提供了多种加密算法和哈希函数，包括对称加密算法（如 AES、DES 等）、哈希函数（如 MD5、SHA-256 等）以及密钥派生函数（如 PBKDF2）等。其模块化的设计使得开发者可以根据实际需求灵活选择和组合不同的功能模块，在浏览器环境和 Node.js 环境中都能良好运行，是实现数据加密和安全验证的常用工具。

二、生成 Token 的功能需求分析

本次要实现的generateToken函数，旨在生成一个包含用户关键信息和失效时间的 Token，具体需求如下：

接收参数：接收用户名称（username）、登录密码（password）和失效时间（expirationMinutes，单位为分钟）作为函数参数。
生成随机字符串：创建一个随机字符串，增加 Token 的随机性和安全性。
计算时间戳：获取当前时间戳，并根据传入的失效时间计算出 Token 的失效时间戳。
拼接信息：将用户名称、登录密码、随机字符串和失效时间拼接成一个字符串。
生成 Token：使用SHA-256哈希算法对拼接后的字符串进行处理，生成最终的 Token。
返回结果：返回包含生成的 Token 和失效时间的对象，方便后续使用。

三、代码实现与解析

1. 下载并引入CryptoJS 库

下载：npm install crypto-js

引入：import CryptoJS from "crypto-js";

2. 定义 generateToken 函数

/**
 * 模拟模拟token，其中包含用户名称、登陆密码以及token失效时间
 * @param username 用户名称
 * @param password 登陆密码
 * @param expirationMinutes 失效时间
 */
export function generateToken(
  username: string,
  password: string,
  expirationMinutes: number,
) {
  // 生成随机字符串作为 Token 的一部分
  const randomString = CryptoJS.lib.WordArray.random(16).toString();
  // 获取当前时间戳
  const currentTime = Date.now();

  // 计算失效时间戳
  const expirationTime = currentTime + expirationMinutes * 60 * 1000;

  // 将用户名、密码、随机字符串、失效时间拼接成一个字符串
  const tokenString = `${username}:${password}:${randomString}:${expirationTime}`;

  // 使用 SHA-256 哈希算法生成 Token
  const token = CryptoJS.SHA256(tokenString).toString();

  return {
    token: token,
    expirationTime: expirationTime,
  };
}

附代码解释：

生成随机字符串：

        const randomString = CryptoJS.lib.WordArray.random(16).toString();

CryptoJS.lib.WordArray.random(16)用于生成一个 16 字节的随机字节数组，通过调用toString()方法将其转换为字符串形式。随机字符串的引入增加了 Token 的复杂度，使得 Token 更难以被猜测或伪造。

获取和计算时间戳：

        const currentTime = Date.now();

        const expirationTime = currentTime + expirationMinutes * 60 * 1000;

        Date.now()返回当前时间的时间戳（单位为毫秒），通过将当前时间戳加上根据失效时间（分钟）换算后的毫秒数，得到 Token 的失效时间戳，用于后续判断 Token 是否过期。

拼接信息：

const tokenString = `${username}:${password}:${randomString}:${expirationTime}`;
使用模板字面量将用户名称、登录密码、随机字符串和失效时间按照特定格式拼接成一个字符串，这个字符串包含了生成 Token 所需的关键信息。
生成 Token：

const token = CryptoJS.SHA256(tokenString).toString();
调用CryptoJS.SHA256方法对拼接后的字符串进行哈希处理，SHA-256是一种安全哈希算法，它会将输入的字符串转换为固定长度（256 位）的哈希值，该哈希值即为最终生成的 Token。由于哈希算法的单向性，无法通过 Token 反向推导出原始的用户信息，保证了用户数据的安全性。

四、使用示例

假设在一个用户登录的场景中，我们可以这样使用generateToken函数


const loginForm = reactive<ReqLoginForm>({
  userName: "",
  password: "",
})
const { token, expirationTime } = generateToken(loginForm.userName, loginForm.password, 60*24);
console.log("token:", token);
console.log("token失效时间:", new Date(expirationTime));

五、注意事项

密码安全：在实际应用中，直接将用户密码包含在 Token 中存在安全风险，因为哈希后的 Token 一旦泄露，攻击者可能通过暴力破解等手段尝试获取原始密码。建议在服务器端对密码进行更安全的处理，如使用加盐哈希等方式存储和验证密码，而不是将密码直接用于生成 Token。
Token 验证：生成 Token 后，在后续的请求中需要在服务器端对 Token 进行验证，包括检查 Token 的有效性和是否过期。同时，应确保 Token 在传输过程中的安全性，如使用 HTTPS 协议。
算法选择：虽然SHA-256是一种较为安全的哈希算法，但随着密码学技术的发展和计算能力的提升，其安全性也面临一定挑战。在对安全性要求极高的场景下，可考虑使用更先进的哈希算法或加密方案。

六、总结

通过使用CryptoJS库，我们实现了一个能够生成包含用户信息和失效时间的 Token 的函数。本文详细介绍了该功能的实现过程，包括引入库、函数定义、代码逻辑解析、使用示例以及注意事项。希望本文能帮助你更好地理解和运用CryptoJS进行安全验证相关的开发工作，在实际项目中合理使用 Token 机制保障应用的安全性。