1. 核心概念与安全警告
在构建一个多密码页面跳转功能时，我们的目标是让用户输入一个密码后，根据该密码的值跳转到不同的目标页面。例如，“dogs”密码跳转到 dogs.html，“cats”密码跳转到 cats.html。
然而，在开始实现之前，必须强调一个极其重要的安全警告：将密码及其对应的跳转逻辑直接硬编码或存储在客户端（如JavaScript代码中）是极不安全的行为。 任何能够访问您网站源代码的人（通过浏览器开发者工具）都可以轻易地查看到所有预设的密码及其对应的页面。这使得密码形同虚设，无法提供任何实际的安全保护。
因此，本文提供的解决方案仅适用于：
- 学习目的： 了解JavaScript如何处理用户输入并进行条件跳转。
- 非敏感内容： 仅用于展示或访问无需任何安全保护的公开信息。
- 演示环境： 在不需要真实用户认证的场景下快速搭建原型。
在任何生产环境或涉及敏感信息的应用中，都应采用服务器端认证机制来处理密码。
2. 实现原理：数据结构设计
为了支持多个密码与多个页面的映射关系，我们可以使用一个JavaScript数组，其中每个元素都是一个对象，包含密码 (pass) 和对应的页面名称 (page)。这种结构清晰地定义了密码与目标页面的关联。
立即学习“Java免费学习笔记（深入）”；
例如：
const passwords = [
{
pass: "dogs",
page: "dogs"
},
{
pass: "cats",
page: "cats"
},
{
pass: "anotherpassword",
page: "secretpage"
}
];当用户输入密码时，我们将在 passwords 数组中查找是否存在匹配的密码。如果找到，则获取其对应的页面名称并进行跳转；否则，提示密码不匹配。
3. HTML 结构：密码输入表单
首先，我们需要一个简单的HTML页面来承载密码输入框和提交按钮。
登录页面
- ：密码输入框，type="password" 会隐藏用户输入的内容，id="pswd" 用于JavaScript获取其值。
- ：一个按钮，当点击时会调用 checkPswd() JavaScript函数。
4. JavaScript 逻辑：处理密码与页面跳转
接下来，我们将编写 checkPswd() 函数来处理用户输入的密码，并根据预设的 passwords 数组进行跳转。
代码解析：
- const passwords = [...]：定义了密码-页面映射数组。
- const passInput = document.getElementById("pswd").value;：获取用户在ID为 pswd 的输入框中输入的值。
- const passMatch = passwords.find(o => o.pass === passInput);：这是核心逻辑。find() 方法遍历 passwords 数组，查找 pass 属性与用户输入 passInput 严格相等的对象。如果找到，passMatch 将是该对象；否则，passMatch 为 undefined。
- if (passMatch)：检查是否找到了匹配的密码。
- window.location =${passMatch.page}.html;：如果找到匹配项，则将当前窗口的URL设置为目标页面，实现页面跳转。这里使用了模板字符串方便地拼接文件名。
- alert("密码不匹配。");：如果未找到匹配项，弹出一个警告框。
5. 完整示例代码
将HTML结构和JavaScript逻辑结合起来，形成一个完整的可运行页面。
login.html (主登录页面):
登录页面
dogs.html (目标页面示例):
狗狗页面
欢迎！您输入的是DOGS密码
您还需要创建 cats.html 和 secretpage.html 文件，内容可以类似 dogs.html，但标题和欢迎信息要相应修改。
6. 注意事项与局限性
- 安全性是首要问题： 如前所述，此方法不适用于任何需要实际安全认证的场景。密码明文存在于客户端代码中，极易被窃取。
- 可维护性与扩展性： 对于少量密码，这种数组映射是可行的。但如果密码数量庞大，手动维护会变得困难。
- 用户体验： 密码错误时简单的 alert 提示用户体验不佳，可以考虑更友好的页面内提示。
- URL 可预测性： 由于跳转是基于简单的文件名，用户可以直接在浏览器中输入 dogs.html 来访问页面，绕过密码验证。如果目标页面是私密内容，这显然是不可接受的。
7. 总结
本文详细介绍了如何使用JavaScript在客户端实现一个简单的多密码页面跳转功能。通过定义一个密码-页面映射数组和利用 Array.prototype.find() 方法，我们可以根据用户输入的不同密码将其重定向到不同的HTML页面。
尽管这种方法在技术上可行，但其固有的安全缺陷（密码明文存储在客户端）使其不适用于任何生产环境或涉及敏感信息的应用。它主要作为理解客户端逻辑和JavaScript数组操作的一个入门级示例。对于实际的认证需求，始终推荐使用安全的服务器端认证机制。
