构建高效安全的React密码生成器：长度控制与实时强度评估

const generatePassword = () => {
  const password = []
  const length = passwordLength
  const characters =
    'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_-+={[}]|<?/'

  for (let i = 0; i < length; i++) { // 循环固定次数
    const index = Math.floor(Math.random() * characters.length)
    // 条件判断，不符合条件则不添加字符
    if (upperCase && characters[index] >= 'A' && characters[index] <= 'Z') {
      password.push(characters[index])
    } else if (lowerCase && characters[index] >= 'a' && characters[index] <= 'z') {
      password.push(characters[index])
    } // ... 其他条件
  }
  setPassword(password.join(''))
  calculateStrength()
}

const generatePassword = () => {
  const newPasswordChars = []; // 使用更明确的变量名
  const length = passwordLength;
  let availableChars = ''; // 动态构建可用字符集

  // 根据用户选择动态构建可用字符集，提高效率和准确性
  if (upperCase) availableChars += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  if (lowerCase) availableChars += 'abcdefghijklmnopqrstuvwxyz';
  if (number) availableChars += '0123456789';
  if (specialChar) availableChars += '!@#$%^&*()_-+={[}]|<?/';

  // 如果没有选择任何字符类型，则不生成密码或给出提示
  if (availableChars.length === 0) {
    setPassword('');
    // 可以添加用户提示，例如 setStrength('请至少选择一种字符类型');
    return;
  }

  do {
    const index = Math.floor(Math.random() * availableChars.length);
    newPasswordChars.push(availableChars[index]);
  } while (newPasswordChars.length < length); // 当长度未达到目标时继续循环

  setPassword(newPasswordChars.join(""));
};

const generatePassword = () => {
  const newPasswordChars = [];
  const length = passwordLength;
  let availableChars = '';

  if (upperCase) availableChars += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  if (lowerCase) availableChars += 'abcdefghijklmnopqrstuvwxyz';
  if (number) availableChars += '0123456789';
  if (specialChar) availableChars += '!@#$%^&*()_-+={[}]|<?/';

  if (availableChars.length === 0) {
    setPassword('');
    return;
  }

  // 循环一个足够大的次数，以确保能找到足够的字符
  for (let i = 0; i < length * 5; i++) { // 循环次数可以设置为目标长度的几倍
    if (newPasswordChars.length === length) {
      break; // 当达到目标长度时立即退出循环
    }
    const index = Math.floor(Math.random() * availableChars.length);
    newPasswordChars.push(availableChars[index]);
  }

  setPassword(newPasswordChars.join(""));
};

import { useState, useEffect } from 'react'; // 确保导入 useEffect

// ... 其他代码

const PasswordGenerator = () => {
  // ... 各种 useState 定义

  // 将 calculateStrength 放入 useEffect
  useEffect(() => {
    // 确保在 password 状态更新后调用 calculateStrength
    calculateStrength();
  }, [password]); // 依赖项数组中包含 password

  // calculateStrength 函数
  const calculateStrength = () => {
    if (password.length === 0) {
      setStrength(''); // 密码为空时，强度也为空
      setColor("#FF0000"); // 默认颜色
      return;
    }
    if (password.length >= 12) {
      setStrength('Strong');
      setColor("#12b40e");
    } else if (password.length >= 8 && password.length <= 11) {
      setStrength('Medium');
      setColor("#ffa200");
    } else { // 密码长度小于8时为Weak
      setStrength('Weak');
      setColor('#ff0000');
    }
  };

  // ... 其他函数和 JSX 渲染
}