recherche

Maison >interface Web >Questions et réponses frontales >Nodejs gère les demandes de connexion

Nodejs gère les demandes de connexion

WBOY
WBOYoriginal
2023-05-13 20:25:06573parcourir

Avec le développement continu d'Internet, la connexion des utilisateurs est devenue une fonction essentielle des services Internet. La gestion des demandes de connexion est également une tâche très courante dans Node.js. Dans cet article, j'expliquerai comment gérer les demandes de connexion des utilisateurs à l'aide de Node.js.

Première étape : configurer l'environnement

Avant de commencer à traiter la demande de connexion, nous devons configurer l'environnement, y compris l'installation de Node.js, du framework Express et des bibliothèques dépendantes associées. Ici, nous prenons le framework Express comme exemple pour expliquer.

Entrez la commande suivante sur la ligne de commande pour installer : 

npm install express --save
npm install body-parser --save
npm install express-session --save

Les bibliothèques dépendantes que nous utilisons ici incluent :

  • Express : fournit un cadre d'application Web simple
  • body-parser : utilisé pour analyser les requêtes HTTP. body ;
  • express-session : Fournit une fonction de gestion de session simple et facile à utiliser.

Étape 2 : Implémenter l'interface frontale

Avant de traiter la demande de connexion, nous devons implémenter une interface frontale simple. Ici, nous utiliserons HTML et JavaScript pour y parvenir.

HTML : 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>登录</title>
  </head>
  <body>
    <form action="/login" method="post">
      <label>用户名：</label>
      <input type="text" name="username"><br>
      <label>密码：</label>
      <input type="password" name="password"><br>
      <button type="submit">登录</button>
    </form>
  </body>
</html>

JavaScript : 

window.onload = function () {
  var form = document.querySelector('form');
  form.addEventListener('submit', function (e) {
    e.preventDefault(); // 阻止表单默认提交
    var username = document.querySelector('input[name="username"]').value;
    var password = document.querySelector('input[name="password"]').value;
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/login');
    xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
    xhr.onload = function () {
      var data = JSON.parse(xhr.responseText);
      alert(data.message);
    };
    xhr.send(JSON.stringify({ username: username, password: password }));
  });
};

Ici, nous implémentons un formulaire de connexion simple et envoyons les données du formulaire côté serveur via l'objet XMLHttpRequest. Il est à noter que lors de l'envoi des données, nous définissons le Content-Type de l'en-tête de la requête au format application/json. Content-Type为application/json格式。

第三步：处理登录请求

现在我们已经实现了一个简单的前端界面，接下来我们需要在服务器端接收并处理登录请求。

app.js：

var express = require('express');
var bodyParser = require('body-parser');
var session = require('express-session');

var app = express();

app.use(bodyParser.json());
app.use(session({
  secret: 'your secret',
  resave: false,
  saveUninitialized: true
}));

// 处理登录请求
app.post('/login', function (req, res) {
  var username = req.body.username;
  var password = req.body.password;
  if (username === 'admin' && password === '123456') {
    req.session.username = username; // 将用户名存储到session中
    res.send({ success: true, message: '登录成功！' });
  } else {
    res.send({ success: false, message: '用户名或密码不正确！' });
  }
});

app.listen(3000, function () {
  console.log('Server running on http://localhost:3000');
});

这里我们使用Express框架提供的app.post方法来处理POST请求，如果用户名和密码都正确，我们将用户名存储到session中，并返回一个响应，否则返回另外一个响应。

需要注意的是，在处理请求之前，我们使用了body-parser中间件来解析HTTP请求体中的JSON格式数据，并使用了express-session中间件来提供会话管理功能。

第四步：处理登录状态

现在，我们已经可以处理用户登录请求，但是还需要处理登录状态。在前端界面中，我们可以通过发送GET请求获取当前用户的登录状态。

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>检查登录状态</title>
  </head>
  <body>
    <button id="checkLogin">检查登录状态</button>
    <script>
      document.getElementById('checkLogin').addEventListener('click', function () {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/checkLogin');
        xhr.onload = function () {
          var data = JSON.parse(xhr.responseText);
          alert(data.message);
        };
        xhr.send();
      });
    </script>
  </body>
</html>

JavaScript：

window.onload = function () {
  var btn = document.getElementById('checkLogin');
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/checkLogin');
  xhr.onload = function () {
    var data = JSON.parse(xhr.responseText);
    if (data.success) {
      btn.innerHTML = '您已登录，点击注销';
    } else {
      btn.innerHTML = '您未登录，点击登录';
    }
  };
  xhr.send();
};

这里我们实现了一个检查登录状态的功能，通过发送GET请求到服务器端来判断当前用户是否已经登录。如果已经登录，我们将按钮的文本改为“点击注销”，否则改为“点击登录”。

app.js：

// 检查登录状态
app.get('/checkLogin', function (req, res) {
  var username = req.session.username;
  if (username) {
    res.send({ success: true, message: '您已经登录了！' });
  } else {
    res.send({ success: false, message: '您还没有登录！' });
  }
});

这里我们使用app.get方法来处理GET请求，如果当前用户已经登录，我们返回一个响应，否则返回另外一个响应。

第五步：处理注销请求

最后，我们还需要处理用户的注销请求。在前端界面中，用户点击注销按钮时，我们需要发送一个logout请求到服务器端。

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>注销</title>
  </head>
  <body>
    <button id="logout">注销</button>
    <script>
      document.getElementById('logout').addEventListener('click', function () {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/logout');
        xhr.onload = function () {
          var data = JSON.parse(xhr.responseText);
          alert(data.message);
        };
        xhr.send();
      });
    </script>
  </body>
</html>

JavaScript：

window.onload = function () {
  var btn = document.getElementById('logout');
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/checkLogin');
  xhr.onload = function () {
    var data = JSON.parse(xhr.responseText);
    if (data.success) {
      btn.style.display = 'block';
      btn.innerHTML = '注销';
    } else {
      btn.style.display = 'none';
    }
  };
  xhr.send();
  btn.addEventListener('click', function () {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/logout');
    xhr.onload = function () {
      var data = JSON.parse(xhr.responseText);
      if (data.success) {
        btn.style.display = 'none';
        alert(data.message);
      }
    };
    xhr.send();
  });
};

这里我们实现了一个注销功能，通过发送GET请求到服务器端来注销当前用户。需要注意的是，在点击注销按钮时，我们需要先检查当前用户是否已经登录。

app.js：

// 处理注销请求
app.get('/logout', function (req, res) {
  req.session.destroy(function () {
    res.send({ success: true, message: '您已经成功注销了！' });
  });
});

这里我们使用req.session.destroy

Étape 3 : Traiter les demandes de connexion

Maintenant que nous avons implémenté une interface frontale simple, nous devons recevoir et traiter les demandes de connexion côté serveur.

app.js : 🎜rrreee🎜Ici, nous utilisons la méthode app.post fournie par le framework Express pour gérer la requête POST. Si le nom d'utilisateur et le mot de passe sont corrects, nous stockons le nom d'utilisateur dans la session. et renvoie une réponse, sinon une autre réponse est renvoyée. 🎜🎜Il est à noter qu'avant de traiter la requête, nous avons utilisé le middleware body-parser pour analyser les données au format JSON dans le corps de la requête HTTP, et avons utilisé le express-sessionMiddleware pour fournir des fonctions de gestion de session. 🎜🎜Étape 4 : Gérer le statut de connexion🎜🎜Maintenant, nous pouvons gérer la demande de connexion de l'utilisateur, mais nous devons toujours gérer le statut de connexion. Dans l'interface frontale, nous pouvons obtenir le statut de connexion de l'utilisateur actuel en envoyant une requête GET. 🎜🎜HTML : 🎜rrreee🎜JavaScript : 🎜rrreee🎜Ici, nous implémentons une fonction pour vérifier l'état de connexion, en envoyant une requête GET au serveur pour déterminer si l'utilisateur actuel s'est connecté. Nous modifions le texte du bouton en "Cliquez pour vous déconnecter" si vous êtes déjà connecté, sinon en "Cliquez pour vous connecter". 🎜🎜app.js : 🎜rrreee🎜Ici, nous utilisons la méthode app.get pour gérer la requête GET Si l'utilisateur actuel est connecté, nous renvoyons une réponse, sinon nous renvoyons une autre réponse. 🎜🎜Étape 5 : Traiter la demande de déconnexion🎜🎜Enfin, nous devons également traiter la demande de déconnexion de l'utilisateur. Dans l'interface frontale, lorsque l'utilisateur clique sur le bouton de déconnexion, nous devons envoyer une demande de déconnexion au serveur. 🎜🎜HTML:🎜rrreee🎜JavaScript:🎜rrreee🎜Ici, nous implémentons une fonction de déconnexion pour déconnecter l'utilisateur actuel en envoyant une requête GET au serveur. Il convient de noter que lorsque nous cliquons sur le bouton de déconnexion, nous devons d'abord vérifier si l'utilisateur actuel est connecté. 🎜🎜app.js : 🎜rrreee🎜Ici, nous utilisons la méthode req.session.destroy pour détruire la session en cours afin d'implémenter la fonction de déconnexion. 🎜🎜Résumé : 🎜🎜Cet article explique comment utiliser Node.js et le framework Express pour gérer les demandes de connexion des utilisateurs. En implémentant une interface frontale simple, nous avons maîtrisé comment utiliser l'objet XMLHttpRequest pour envoyer des requêtes POST et GET, réalisant ainsi la fonction interactive frontale. En implémentant les fonctions de connexion et de déconnexion côté serveur, nous avons appris à utiliser le middleware fourni par le framework Express pour gérer les requêtes HTTP et les fonctions de gestion de session. Je pense qu'après avoir maîtrisé le contenu présenté dans cet article, vous pouvez déjà gérer facilement les demandes de connexion des utilisateurs. 🎜

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：ssh installer nodejsArticle suivant：ssh installer nodejs

Articles Liés

Voir plus