介绍
体验密码生成器
什么是密码？
密码是一种用来混淆的技术，它希望将正常的（可识别的）信息转变为无法识别的信息。当然，对一小部分人来说，这种无法识别的信息是可以再加工并恢复的。密码在中文里是“口令”（password）的通称。登录网站、电子邮箱和银行取款时输入的“密码”其实严格来讲应该仅被称作“口令”，因为它不是本来意义上的“加密代码”，但是也可以称为秘密的号码。
什么是强密码？
- 独特的： 您应该为每个帐户设置单独的密码。
- 长的： 它的长度至少为 12 个字符。
- 复杂的： 它包括大写和小写字母、数字和符号。
什么是随机密码生成器？
密码随机生成器是一种软件或程序，可为您的各种软件和网站的帐户随机生成密码。使用此工具，您不必时常手动更改密码，并且可以获得由各种字母、数字和符号组成的字符串组成的强密码。
您可能想知道：我可以自己创建组合随机字符的密码，那为什么还要麻烦呢？因为人们不擅长随机选择密码，而倾向于使用常见的数字、字符和名称。无论你认为自己有多聪明，计算机都很容易破解人类生成的密码。这就是为什么您应该使用我们的密码生成器。
随机密码生成器安全吗？
在选择随机密码生成器时，人们最关心的是安全性。不确定密码生成器的公司是否会知道您的新密码。这些公司与许多安全站点一样使用 HTTPS 通信协议，但它可能不如银行系统安全。
因此，在选择密码管理器或密码生成器时，最好选择信誉良好且安全级别高的。
我们的密码生成器具有安全的本地加密，使黑客无法访问创建的密码。我们不会在线存储您的详细信息。
为什么我的密码应该是唯一的？
绝对有必要为您的每个在线帐户设置一个唯一的密码。
跨帐户重复使用密码会带来重大风险。一旦黑客窃取了您的一个帐户的密码，他们就会获得对所有其他帐户的访问权限。
通过简单地向现有密码添加额外的字符、符号或数字来创建新密码并不是一个好主意。建议您使用我们的强密码生成器，这将为您提供额外的保护。
为什么我的密码应该是随机的？
强密码由大小写字母、数字和特殊字符组成，即使是最熟练的黑客也无法破解。它也应该与您的个人信息无关。如果您在密码中使用电话号码、社会安全号码、邮政编码、身份证号码、门牌号码和生日，则攻击者很容易危及您的帐户。
代码
效果图
Snipaste_2024-04-19_17-25-01.png
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样式
<style lang="scss" scoped>
.password .content {
padding: 50px 100px;
}
.tool-main {
padding-top: 20px;
}
.tool-title {
display: flex;
align-items: center;
}
.tool-title h1 {
font-size: 24px;
}
.tool-title .icon {
width: 2.2em;
height: 2.2em;
margin-right: 5px;
}
.input-icon-box {
display: flex;
align-items: center;
padding: 10px 5px;
}
.copy-icon-box,
.m-copy-icon-box {
cursor: pointer;
background-color: var(--themeTextColor);
margin: 5px 0;
padding: 5px 25px;
border-radius: 2px;
color: #fff;
line-height: 35px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
user-select: none;
&:hover {
opacity: 0.8;
}
}
.m-copy-icon-box {
margin-top: 10px;
display: none;
}
.icon {
width: 2em;
height: 2em;
cursor: pointer;
margin-right: 10px;
}
.config-item-box,
.password-length-box,
.about-password-box {
margin: 20px 0;
span {
font-weight: 500;
display: flex;
align-items: center;
.icon {
width: 1.2em;
height: 1.2em;
}
}
}
.config-item-box {
margin-top: 20px;
}
.password-length-box span {
margin-right: 20px;
}
.password-length-box .slider {
width: 400px;
}
.history-box p {
font-size: 14px;
}
.record-box {
font-size: 12px;
display: flex;
align-items: center;
flex-wrap: wrap;
span {
margin-left: 20px;
}
}
.look-history-box {
display: flex;
align-items: center;
span {
font-size: 14px;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
.bi {
margin-left: 3px;
}
}
}
.bi-chevron-down::before {
transform: rotate(0deg);
transition: all 0.3s;
vertical-align: middle;
}
.bi-chevron-down.open-more::before {
transform: rotate(180deg);
transition: all 0.3s;
}
.remove-btn {
margin-top: 10px;
background-color: red;
width: 90px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
padding: 8px 0;
color: #fff;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
&:hover {
background-color: rgb(229, 41, 41);
transition: all 0.2s;
}
}
.history-content {
padding: 10px;
display: flex;
align-items: center;
flex-wrap: wrap;
background-color: #fff;
border-radius: 5px;
margin-top: 10px;
.history-pw-item {
padding: 8px 0;
width: 50%;
overflow-wrap: break-word;
span {
color: rgb(12, 6, 1);
font-weight: 500;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
&:hover {
color: var(--linkTextColor);
transition: all 0.2s;
}
}
}
p {
font-size: 14px;
}
}
.about-password-box {
margin-top: 30px;
p {
font-size: 14px;
margin: 10px 0;
}
}
:deep(.el-input__wrapper.is-focus) {
box-shadow: none;
}
:deep(.el-slider__runway) {
background-color: #666;
}
:deep(.el-slider__bar) {
background-color: var(--themeTextColor);
}
:deep(.el-slider__button) {
border-color: var(--themeTextColor);
}
:deep(.el-checkbox__label) {
color: var(--balckTextColor) !important;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
background-color: var(--themeTextColor);
border-color: var(--themeTextColor);
}
:deep(.password-input .el-input__inner) {
font-size: 20px;
font-weight: 600;
color: var(--balckTextColor);
}
.rotate-animation {
animation: rotate 0.3s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (max-width: 860px) {
.password .content {
padding: 10px;
}
.tool-main {
padding: 0;
}
.password-input .icon {
margin-right: 0;
}
.copy-icon-box {
display: none;
}
.m-copy-icon-box {
display: block;
}
.password-length-box .slider {
width: 100%;
}
.look-history-box {
margin-top: 10px;
}
.history-pw-item {
width: 100% !important;
}
}
</style>
定义变量
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,
});
});
};
