So verwenden Sie JavaScript, um die Anmeldefunktion zu implementieren

In Projekten mit getrenntem Front-End und Backend ist die Login-Funktion eine wesentliche Funktion. Das Frontend muss JavaScript-Code schreiben, um die Anmeldefunktion zu implementieren. Lassen Sie uns darüber sprechen, wie Sie JavaScript zum Implementieren der Anmeldefunktion verwenden.

Zunächst müssen wir Cookies und Sitzungen im HTTP-Protokoll verstehen. Diese beiden sind wichtige Konzepte zur Realisierung der Anmeldefunktion. Wenn der Benutzer eine Anmeldeanforderung sendet, überprüft der Server, ob das vom Benutzer übermittelte Konto und Passwort korrekt sind. Wenn die Benutzerinformationen korrekt sind, werden die Benutzerinformationen in der Sitzung und die Sitzungs-ID im Cookie des Clients gespeichert Antwortheader, damit der Server ihn beim nächsten Mal anfordern kann. Benutzerinformationen können anhand der Sitzungs-ID gefunden werden. Nach erfolgreicher Anmeldung kann der Client anhand der Sitzungs-ID im Cookie feststellen, ob der Benutzer angemeldet ist, und so den Status beibehalten.

Mit diesem Grundwissen können wir mit der Implementierung der Login-Funktion beginnen.

1. Erstellen Sie ein Anmeldeformular

Zuerst müssen wir ein Anmeldeformular in HTML erstellen. Das Formular enthält zwei Eingabefelder für Kontonummer und Passwort sowie eine Anmeldeschaltfläche.

<form id="login-form">
  <label for="username">账号：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <br>
  <button type="submit">登录</button>
</form>

Im Formular weisen wir jedem Eingabefeld eine ID zu, damit JavaScript den Wert im Eingabefeld abrufen kann.

2. Abhören des Formularübermittlungsereignisses

Wir müssen das Formularübermittlungsereignis abhören und die Anmeldelogik im Übermittlungsereignis verarbeiten.

const form = document.querySelector('#login-form');
form.addEventListener('submit', handleLogin);

function handleLogin(event) {
  event.preventDefault(); // 阻止表单默认提交事件
  const username = document.querySelector('#username').value;
  const password = document.querySelector('#password').value;
  // TODO: 验证账号密码是否正确
  // TODO: 发送登录请求
}

Erhalten Sie zunächst den Wert der Konto- und Passwort-Eingabefelder im Formular über die Methode document.querySelector. Anschließend können Sie die Verifizierungslogik selbst schreiben Verwenden Sie zur Überprüfung eine Bibliothek eines Drittanbieters. document.querySelector 方法获取表单中的账号和密码输入框的值，然后可以对账号密码进行验证，可以自己编写验证逻辑，也可以使用第三方库进行验证。

3. 发送登录请求

如果账号密码验证通过，则可以发送登录请求。发送请求需要使用 XMLHttpRequest 对象，后面的示例中将使用 fetch API。

const form = document.querySelector('#login-form');
form.addEventListener('submit', handleLogin);

function handleLogin(event) {
  event.preventDefault(); // 阻止表单默认提交事件
  const username = document.querySelector('#username').value;
  const password = document.querySelector('#password').value;
  // TODO: 验证账号密码是否正确
  fetch('/api/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username, password })
  })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        alert('登录成功');
        // TODO: 保存用户信息到 session
        // TODO: 跳转到首页
      } else {
        alert('登录失败，账号或密码错误');
      }
    })
    .catch(error => {
      console.error(error);
      alert('登录失败，网络异常');
    });
}

在发送请求时，需要将账号密码封装成一个 JSON 对象作为请求体，然后在请求头中指定 Content-Type 为 application/json。服务器返回的数据是一个 JSON 对象，其中包含一个 success 字段表示登录是否成功。如果登录成功，则可以将用户信息保存到 session 中，并跳转到首页；如果登录失败，则弹出错误提示。

4. 保存用户信息到 session

在登录成功后，服务器需要将用户信息保存到 session 中。可以使用 fetch API 发送另一个请求，在请求中设置 credentials 为 include，以便在发送请求时自动携带 cookie，从而在服务端可以通过 cookie 中的 session id 来访问对应的 session。

fetch('/api/user', {
  credentials: 'include'
})
  .then(response => response.json())
  .then(data => {
    // TODO: 将用户信息保存到 session
  })
  .catch(error => {
    console.error(error);
    alert('获取用户信息失败');
  });

在服务端，可以使用 express-session 中间件来处理 session。在登录成功后，将用户信息保存到 session 中：

app.post('/api/login', (req, res) => {
  const { username, password } = req.body;
  // TODO: 验证账号密码是否正确
  // TODO: 将用户信息保存到 session
  req.session.user = { id: 1, username: 'admin' };
  res.json({ success: true });
});

在获取用户信息时，可以通过 req.session.user 来获取登录的用户信息：

app.get('/api/user', (req, res) => {
  res.json(req.session.user);
});

5. 页面跳转

在登录成功后，还需要将页面跳转到首页。可以使用 JavaScript 来实现页面跳转。

if (data.success) {
  alert('登录成功');
  // TODO: 保存用户信息到 session
  window.location.href = '/'; // 跳转到首页
} else {
  alert('登录失败，账号或密码错误');
}

在跳转页面时，可以使用 window.location.href

Anmeldeanfrage senden

Wenn die Kontopasswortüberprüfung erfolgreich ist, können Sie eine Anmeldeanfrage senden. Um eine Anfrage zu senden, müssen Sie das XMLHttpRequest-Objekt verwenden. In den folgenden Beispielen wird die Fetch-API verwendet.

rrreee🎜Wenn Sie eine Anfrage senden, müssen Sie das Kontopasswort in ein JSON-Objekt als Anfragetext einkapseln und dann den Inhaltstyp als application/json im Anfrageheader angeben. Bei den vom Server zurückgegebenen Daten handelt es sich um ein JSON-Objekt, das ein Erfolgsfeld enthält, das angibt, ob die Anmeldung erfolgreich war. Bei erfolgreicher Anmeldung können die Benutzerinformationen in der Sitzung gespeichert und zur Startseite gesprungen werden; schlägt die Anmeldung fehl, erscheint eine Fehlermeldung. 🎜
🎜Benutzerinformationen in der Sitzung speichern🎜🎜🎜Nach erfolgreicher Anmeldung muss der Server Benutzerinformationen in der Sitzung speichern. Sie können die Abruf-API verwenden, um eine weitere Anfrage zu senden, und Anmeldeinformationen festlegen, die in die Anfrage aufgenommen werden sollen, sodass das Cookie beim Senden der Anfrage automatisch übertragen wird, sodass auf die entsprechende Sitzung über die Sitzungs-ID im Cookie auf der Serverseite zugegriffen werden kann . 🎜rrreee🎜Auf der Serverseite können Sie Express-Session-Middleware verwenden, um Sitzungen abzuwickeln. Speichern Sie nach erfolgreicher Anmeldung die Benutzerinformationen in der Sitzung: 🎜rrreee🎜 Beim Abrufen von Benutzerinformationen können Sie die angemeldeten Benutzerinformationen über req.session.user abrufen: 🎜rrreee
🎜Seitensprung 🎜🎜 🎜Nach erfolgreicher Anmeldung müssen Sie noch zur Startseite springen. Sie können JavaScript verwenden, um zur Seite zu springen. 🎜rrreee🎜Wenn Sie zu einer Seite springen, können Sie das Attribut window.location.href verwenden, um die URL der Seite festzulegen, um einen Seitensprung zu erreichen. 🎜🎜Zusammenfassung: 🎜🎜In diesem Artikel wird erläutert, wie Sie JavaScript zum Implementieren der Anmeldefunktion verwenden. Die Implementierung der Anmeldung erfordert die Verarbeitung vieler Aspekte, darunter die Überprüfung von Konto und Passwort, das Senden von Anfragen, das Speichern von Benutzerinformationen in der Sitzung, Seitensprünge usw. Ich glaube, dass die Leser durch die Einleitung dieses Artikels schnell die Methode zur Implementierung der Anmeldefunktion im Frontend beherrschen können. 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JavaScript, um die Anmeldefunktion zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!