实现随机密码生成器工具

分类：developer ｜标签：密码、随机、生成、安全自定义长度与字符集，避开易混淆字符，一键生成高强度密码

2.1 功能说明

自定义长度与字符集，避开易混淆字符，一键生成高强度密码

2.1.1 使用指南

随机密码生成器使用指南

安全性说明

密码使用浏览器原生 crypto.getRandomValues 生成，属于密码学安全随机，不会上传服务器。

强度评估

基于「长度 × 字符池大小」的熵估算（bit = 长度 × log2(字符种类数)）。一般建议 ≥ 60 bit 视为强密码。

使用建议

重要账号启用「符号」并 ≥ 12 位。
开启「排除易混淆字符」便于人工抄写与口述。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

buildPool()
generate()
copy()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

vue

import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import ToolPageShell from '@/components/ToolPageShell.vue'

const length = ref(16)
const opt = reactive({ upper: true, lower: true, number: true, symbol: true, excludeAmbiguous: false })
const password = ref('')
const error = ref('')

const SETS = {
  upper: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  lower: 'abcdefghijklmnopqrstuvwxyz',
  number: '0123456789',
  symbol: '!@#$%^&*()-_=+[]{};:,.<>?'
}
const AMBIGUOUS = /[0O1lI|]/g

function buildPool() {
  let pool = ''
  if (opt.upper) pool += SETS.upper
  if (opt.lower) pool += SETS.lower
  if (opt.number) pool += SETS.number
  if (opt.symbol) pool += SETS.symbol
  if (opt.excludeAmbiguous) pool = pool.replace(AMBIGUOUS, '')
  return pool
}

function generate() {
  error.value = ''
  const pool = buildPool()
  if (!pool) {
    error.value = '请至少选择一种字符类型'
    password.value = ''
    return
  }
  const buf = new Uint32Array(length.value)
  crypto.getRandomValues(buf)
  let result = ''
  for (let i = 0; i < length.value; i++) {
    result += pool[buf[i] % pool.length]
  }
  password.value = result
}

const strength = computed(() => {
  if (!password.value) return { type: 'info', label: '-', bits: 0 }
  const poolSize = buildPool().length
  if (!poolSize) return { type: 'info', label: '-', bits: 0 }
  const bits = Math.round(password.value.length * Math.log2(poolSize))
  if (bits < 40) return { type: 'danger', label: '弱', bits }
  if (bits < 60) return { type: 'warning', label: '中', bits }
  if (bits < 80) return { type: 'success', label: '强', bits }
  return { type: 'success', label: '很强', bits }
})

async function copy(text) {
  if (!text) return
  try {
    await navigator.clipboard.writeText(text)
    ElMessage.success('已复制')
  } catch {
    ElMessage.warning('复制失败，请手动复制')
  }
}

generate()

2.3 效果截图

暂未生成该工具的效果截图。

工具访问地址：https://www.i91tools.com/tools/password-generator

实现 随机密码生成器 工具 ​

2.1 功能说明 ​

2.1.1 使用指南 ​