Nodejs handles login requests-Front-end Q&A-php.cn

With the continuous development of the Internet, user login has become an essential function of Internet services. Handling login requests is also a very common task in Node.js. In this article, I will explain how to handle user login requests using Node.js.

Step 1: Set up the environment

Before starting to process the login request, we need to set up the environment, including installing Node.js, Express framework and related dependent libraries. Here we take the Express framework as an example to explain.

Enter the following command on the command line to install:

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

Copy after login

The dependent libraries we use here include:

Express: Provides a simple Web application Program framework;
body-parser: used to parse the data in the HTTP request body;
express-session: provides a simple and easy-to-use session management function.

Step 2: Implement the front-end interface

Before processing the login request, we need to implement a simple front-end interface. Here we will use HTML and JavaScript to achieve it.

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>

Copy after login

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 }));
  });
};

Copy after login

Here we implement a simple login form and send the form data to the server through the XMLHttpRequest object. It should be noted that when sending data, we set the Content-Type of the request header to the application/json format.

Step 3: Process login requests

Now that we have implemented a simple front-end interface, we need to receive and process login requests on the server side.

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');
});

Copy after login

Here we use the app.post method provided by the Express framework to handle the POST request. If the username and password are correct, we will Store it in the session and return a response, otherwise return another response.

It should be noted that before processing the request, we used the body-parser middleware to parse the JSON format data in the HTTP request body, and used express-session Middleware to provide session management functions.

Step 4: Process the login status

Now, we can process the user login request, but we still need to process the login status. In the front-end interface, we can obtain the current user's login status by sending a GET request.

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>

Copy after login

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();
};

Copy after login

Here we implement a function to check the login status and determine whether the current user has logged in by sending a GET request to the server. We change the button text to "Click to log out" if already logged in, otherwise to "Click to log in".

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: '您还没有登录！' });
  }
});

Copy after login

Here we use the app.get method to handle the GET request. If the current user is logged in, we return a response, otherwise return another one response.

Step 5: Process the logout request

Finally, we also need to process the user's logout request. In the front-end interface, when the user clicks the logout button, we need to send a logout request to the server.

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>

Copy after login

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();
  });
};

Copy after login

Here we implement a logout function to log out the current user by sending a GET request to the server. It should be noted that when clicking the logout button, we need to first check whether the current user is logged in.

app.js:

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

Copy after login

Here we use the req.session.destroy method to destroy the current session to achieve the logout function.

Summary:

This article introduces how to use Node.js and Express framework to handle user login requests. By implementing a simple front-end interface, we have mastered how to use the XMLHttpRequest object to send POST and GET requests, thus realizing the front-end interactive function. By implementing the login and logout functions on the server side, we learned how to use the middleware provided by the Express framework to handle HTTP requests and session management functions. I believe that after mastering the content introduced in this article, you can already handle user login requests easily.

The above is the detailed content of Nodejs handles login requests. For more information, please follow other related articles on the PHP Chinese website!