如何在javascript中验证密码后移动到另一个html页面？

Question

有两个html页面，index.html和bankPage.html，我试图在index.html上使用密码来验证用户，然后如果密码正确，他就会移动到bankPage.html页面。 使用window.location（或location），我可以移动到bankPage.HTML，但是在移动到HTML页面后，我得到一个TypeError，因为我选择的按钮在bankPage.html中保存一个值null，并且该按钮是在index.html中定义的。 html.

我得到的错误是 - 未捕获类型错误：无法读取 null 的属性（读取“addEventListener”）

这是代码

//just an array that holds the user info in objects(array of objects)
const accounts = [account1, account2, account3, account4];

const btnLogin = document.querySelector('.login__button');
const inputLoginUsername = document.querySelector('.login__input--user');
const inputLoginPassword = document.querySelector('.login__input--password');

// Even handlers for logging in from the index page to the bank page

let currentAccount;

btnLogin.addEventListener('click', function (e) {
  e.preventDefault();

  currentAccount = accounts.find(function (acc) {
    return acc.owner === inputLoginUsername.value;
  });

  if (currentAccount?.password === inputLoginPassword.value) {
    //send to another page
    window.location = 'bankPage.html';
    
  }
});

Answer 1

代码中的一个更大的错误使您提出的问题变得无关紧要：您将密码存储在帐户数据中。这是一个很大的禁忌。

让我们看看你的代码：

const inputLoginPassword = document.querySelector('.login__input--password');
// it means you pick up what the user entered from an element

if (currentAccount?.password === inputLoginPassword.value) // ...
// it means that you keep the password in account data
// and check if the string entered by the user match a password

不，密码不应存储在任何地方。通常的做法是使用加密缓存功能进行存储。没有任何地方需要知道密码：缓存函数是根据用户输入计算出来的，然后与缓存进行比较。

这是“下一页”问题的想法：不使用多个页面。使用单页方法要好得多。您可以通过对除一个页面之外的所有页面使用 CSS display: none 的多个 HTML 部分元素来创建多个页面的完美印象，并将样式

display: block

移动到您想要显示的部分。每个部分都可以占据整个浏览器的客户区或其中的一部分。顺便说一句，安全性只是您从单页面设计中获得重要好处的一个方面。页面数据是隔离的，因此，如果您需要使用任何可用方法将任何敏感数据从一个页面传递到另一个页面，则可能会极大地损害安全性。