记录小工具：密码生成器的开发
介绍
体验密码生成器
前往体验
什么是密码？
密码是一种用来混淆的技术，它希望将正常的（可识别的）信息转变为无法识别的信息。当然，对一小部分人来说，这种无法识别的信息是可以再加工并恢复的。密码在中文里是“口令”（password）的通称。登录网站、电子邮箱和银行取款时输入的“密码”其实严格来讲应该仅被称作“口令”，因为它不是本来意义上的“加密代码”，但是也可以称为秘密的号码。
什么是强密码？
- 独特的： 您应该为每个帐户设置单独的密码。
- 长的： 它的长度至少为 12 个字符。
- 复杂的： 它包括大写和小写字母、数字和符号。
什么是随机密码生成器？
密码随机生成器是一种软件或程序，可为您的各种软件和网站的帐户随机生成密码。使用此工具，您不必时常手动更改密码，并且可以获得由各种字母、数字和符号组成的字符串组成的强密码。
您可能想知道：我可以自己创建组合随机字符的密码，那为什么还要麻烦呢？因为人们不擅长随机选择密码，而倾向于使用常见的数字、字符和名称。无论你认为自己有多聪明，计算机都很容易破解人类生成的密码。这就是为什么您应该使用我们的密码生成器。
随机密码生成器安全吗？
在选择随机密码生成器时，人们最关心的是安全性。不确定密码生成器的公司是否会知道您的新密码。这些公司与许多安全站点一样使用 HTTPS 通信协议，但它可能不如银行系统安全。
因此，在选择密码管理器或密码生成器时，最好选择信誉良好且安全级别高的。
我们的密码生成器具有安全的本地加密，使黑客无法访问创建的密码。我们不会在线存储您的详细信息。
为什么我的密码应该是唯一的？
绝对有必要为您的每个在线帐户设置一个唯一的密码。
跨帐户重复使用密码会带来重大风险。一旦黑客窃取了您的一个帐户的密码，他们就会获得对所有其他帐户的访问权限。
通过简单地向现有密码添加额外的字符、符号或数字来创建新密码并不是一个好主意。建议您使用我们的强密码生成器，这将为您提供额外的保护。
为什么我的密码应该是随机的？
强密码由大小写字母、数字和特殊字符组成，即使是最熟练的黑客也无法破解。它也应该与您的个人信息无关。如果您在密码中使用电话号码、社会安全号码、邮政编码、身份证号码、门牌号码和生日，则攻击者很容易危及您的帐户。
代码
效果图
Html结构
<div class="password w theme-bg-color">
<div class="content">
<div class="tool-title">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-mima1">use>
svg>
<h1>密码生成器h1>
div>
<div class="tool-main">
<el-input class="password-input" size="large" v-model="passwordVal">
<template #suffix>
<div class="input-icon-box">
<svg
class="icon refresh-icon"
aria-hidden="true"
@click="handleRefreshClick"
>
<use xlink:href="#icon-shuaxin">use>
svg>
div>
<div
class="input-icon-box copy-icon-box"
@click="copyText(passwordVal)"
>
复制
div>
template>
el-input>
<div class="input-icon-box m-copy-icon-box" @click="copyText(passwordVal)">
复制
div>
<div class="config-item-box">
<span
><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-peizhi">use>svg
><span>配置项span>span
>
<div>
<el-checkbox
@change="updatePassword"
size="large"
label="数字（0-9）"
v-model="numbers"
/>
<el-checkbox
@change="updatePassword"
size="large"
label="小写字母（a-z）"
v-model="lowercase"
/>
<el-checkbox
@change="updatePassword"
size="large"
label="大写字母（A-Z）"
v-model="uppercase"
/>
<el-checkbox
@change="updatePassword"
size="large"
label="特殊字符（!@#$%^&*）"
v-model="symbols"
/>
div>
<div>
<el-checkbox
@change="updatePassword"
label="排除混淆字符（1lI、0oO）"
v-model="exclude"
/>
div>
div>
<div class="password-length-box">
<span
><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-changdu">use>svg
><span>密码长度span>span
>
<el-slider
@change="updatePassword"
v-model="passLength"
show-input
class="slider"
:min="1"
:max="50"
/>
div>
<div class="history-box">
<div class="record-box">
<el-checkbox label="记录历史密码" v-model="isHistory" />
<span
>---该功能将记录您最近生成的100个密码。并且历史记录不是存储在我们云端服务器上，而是存储在您的浏览器本地存储中。span
>
div>
<div class="look-history-box">
<span @click="historyPassword"
>{{ isMore ? "隐藏历史记录" : "查看历史记录" }}
<i class="bi bi-chevron-down">i
>span>
div>
<div class="remove-btn" v-if="isMore" @click="removeHistory">清除历史记录div>
<div class="history-content" v-if="isMore">
<div
class="history-pw-item"
v-for="(item, idx) in dataMap.passList"
:key="idx"
>
<span @click="copyText(item)">{{ item }}span>
div>
div>
div>
<div class="about-password-box">
<span
><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-guanyu-">use>svg
><span>关于密码生成器span>span
>
<p>
密码是一种用来混淆的技术，它希望将正常的（可识别的）信息转变为无法识别的信息。当然，对一小部分人来说，这种无法识别的信息是可以再加工并恢复的。密码在中文里是“口令”（password）的通称。登录网站、电子邮箱和银行取款时输入的“密码”其实严格来讲应该仅被称作“口令”，因为它不是本来意义上的“加密代码”，但是也可以称为秘密的号码。
p>
div>
div>
div>
div>
css样式
定义变量
const dataMap = reactive({
passList: [],
});
let passwordVal = ref("");
let passLength = ref(12);
let numbers = ref(true);
let lowercase = ref(true);
let uppercase = ref(true);
let symbols = ref(true);
let exclude = ref(true);
let isHistory = ref(true);
let isMore = ref(false);
let maxPw = ref(100);
定义刷新密码的方法
const updatePassword = () => {
const charSets = {
uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
lowercase: "abcdefghijklmnopqrstuvwxyz",
numbers: "0123456789",
symbols: "!@#$%^&*()_+-=[]{}|;:,.<>?",
};
let allChars = "";
for (const [key, value] of Object.entries(charSets)) {
if (key === "exclude" && exclude.value) {
allChars = allChars.replace(/[1lI0oO]/g, "");
} else if (key === "symbols" && symbols.value) {
allChars += value;
} else if (key !== "exclude" && key !== "symbols" && eval(`${key}.value`)) {
allChars += value;
} else {
allChars = allChars.replace(new RegExp("[" + value + "]", "g"), "");
}
}
passwordVal.value = "";
for (let i = 0; i < passLength.value; i++) {
const randomIndex = Math.floor(Math.random() * allChars.length);
passwordVal.value += allChars[randomIndex];
}
if (isHistory.value) {
dataMap.passList = getStore("PASS_WORD_LIST")?.length
? getStore("PASS_WORD_LIST")
: [];
if (dataMap.passList.length < maxPw.value) {
dataMap.passList.push(passwordVal.value);
setStore("PASS_WORD_LIST", dataMap.passList);
}
}
};
页面加载或刷新时
在onMounted钩子中调用updatePassword函数，并在setup中判断浏览器是否保存了历史密码记录
onMounted(() => {
updatePassword();
});
if (getStore("PASS_WORD_LIST")?.length) {
dataMap.passList = getStore("PASS_WORD_LIST");
}
点击刷新按钮时给按钮添加动画
const handleRefreshClick = () => {
const iconBox = document.querySelector(".refresh-icon");
iconBox.classList.add("rotate-animation");
setTimeout(() => {
iconBox.classList.remove("rotate-animation");
}, 500);
updatePassword();
};
点击显示/隐藏历史记录按钮方法
const historyPassword = () => {
isMore.value = !isMore.value;
const moreIcon = document.querySelector(".bi-chevron-down");
moreIcon.classList.toggle("open-more");
};
点击清楚历史记录的方法
const removeHistory = () => {
clearStore("PASS_WORD_LIST");
dataMap.passList = getStore("PASS_WORD_LIST");
isMore.value = false;
};
点击赋值按钮的方法
const copyText = (val) => {
navigator.clipboard
.writeText(val)
.then(() => {
ElNotification({
title: "成功",
message: "您生成的密码已经复制成功！",
type: "success",
zIndex: 99999,
});
})
.catch(() => {
ElNotification({
title: "失败",
message: "复制密码时出错，请重试",
type: "warning",
zIndex: 99999,
});
});
};
原文链接
记录小工具：密码生成器的开发