Comment utiliser JavaScript pour implémenter la fonctionnalité de connexion

Dans les projets avec séparation front-end et back-end, la fonction de connexion est une fonction essentielle. Le front-end doit écrire du code JavaScript pour implémenter la fonction de connexion. Parlons de la façon d'utiliser JavaScript pour implémenter la fonction de connexion.

Tout d'abord, nous devons comprendre les cookies et les sessions dans le protocole HTTP. Ces deux concepts sont importants pour réaliser la fonction de connexion. Lorsque l'utilisateur soumet une demande de connexion, le serveur vérifiera si le compte et le mot de passe soumis par l'utilisateur sont corrects, les informations de l'utilisateur seront enregistrées dans la session et l'identifiant de session sera enregistré dans le cookie du client. en-tête de réponse afin que le serveur puisse le demander la prochaine fois. Les informations sur l'utilisateur peuvent être trouvées par identifiant de session. Après une connexion réussie, le client peut déterminer si l'utilisateur est connecté en fonction de l'identifiant de session dans le cookie, conservant ainsi son état.

Avec ces connaissances de base, nous pouvons commencer à mettre en œuvre la fonction de connexion.

1. Créer un formulaire de connexion

Tout d'abord, nous devons créer un formulaire de connexion en HTML. Le formulaire contient deux zones de saisie pour le numéro de compte et le mot de passe, ainsi qu'un bouton de connexion.

<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>

Dans le formulaire, nous attribuons un identifiant à chaque zone de saisie pour faciliter JavaScript pour obtenir la valeur dans la zone de saisie.

2. Écoutez l'événement de soumission de formulaire

Nous devons écouter l'événement de soumission de formulaire et gérer la logique de connexion dans l'événement de soumission.

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: 发送登录请求
}

Obtenez d'abord la valeur des zones de saisie du compte et du mot de passe dans le formulaire via la méthode document.querySelector. Vous pouvez ensuite vérifier le mot de passe du compte vous-même, ou vous pouvez. utilisez une bibliothèque tierce pour la vérification. 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

Envoyer une demande de connexion

Si la vérification du mot de passe du compte est réussie, vous pouvez envoyer une demande de connexion. Pour envoyer une requête, vous devez utiliser l'objet XMLHttpRequest et l'API fetch sera utilisée dans les exemples suivants.

rrreee🎜Lors de l'envoi d'une demande, vous devez encapsuler le mot de passe du compte dans un objet JSON en tant que corps de la demande, puis spécifier le type de contenu comme application/json dans l'en-tête de la demande. Les données renvoyées par le serveur sont un objet JSON, qui contient un champ de réussite indiquant si la connexion a réussi. Si la connexion réussit, les informations utilisateur peuvent être enregistrées dans la session et renvoyées à la page d'accueil ; si la connexion échoue, un message d'erreur apparaîtra. 🎜
🎜Enregistrer les informations utilisateur dans la session🎜🎜🎜Après une connexion réussie, le serveur doit enregistrer les informations utilisateur dans la session. Vous pouvez utiliser l'API fetch pour envoyer une autre requête et définir les informations d'identification à inclure dans la requête afin que le cookie soit automatiquement transporté lors de l'envoi de la requête, afin que la session correspondante soit accessible côté serveur via l'identifiant de session dans le cookie. . 🎜rrreee🎜 Côté serveur, vous pouvez utiliser un middleware de session express pour gérer les sessions. Après une connexion réussie, enregistrez les informations utilisateur dans la session : 🎜rrreee🎜 Lors de l'obtention des informations utilisateur, vous pouvez obtenir les informations utilisateur connecté via req.session.user : 🎜rrreee
🎜Saut de page 🎜🎜 🎜Une fois connecté avec succès, vous devez toujours accéder à la page d'accueil. Vous pouvez utiliser JavaScript pour accéder à la page. 🎜rrreee🎜Lorsque vous accédez à une page, vous pouvez utiliser l'attribut window.location.href pour définir l'URL de la page afin de réaliser un saut de page. 🎜🎜Résumé : 🎜🎜Cet article explique comment utiliser JavaScript pour implémenter la fonction de connexion. La mise en œuvre de la connexion nécessite de traiter de nombreux aspects, notamment la vérification du compte et du mot de passe, l'envoi de demandes, l'enregistrement des informations utilisateur dans la session, les sauts de page, etc. Grâce à l'introduction de cet article, je pense que les lecteurs peuvent rapidement maîtriser la méthode de mise en œuvre de la fonction de connexion sur le front-end. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!