Heim > Artikel > Web-Frontend > So implementieren Sie die Anmeldung in NodeJS

So implementieren Sie die Anmeldung in NodeJS

王林Original: 2023-05-28 10:12:07769Durchsuche

Node.js ist eine sehr beliebte serverseitige JavaScript-Programmiersprache, die in Webentwicklungsanwendungen eine wichtige Rolle spielt. Die Implementierung einer vollständigen Webanwendung erfordert den Einsatz verschiedener Technologien und Tools, von denen eine sehr wichtige Funktion das Benutzeranmeldesystem ist.

In diesem Artikel stellen wir vor, wie Node.js die Anmeldefunktion implementiert. Wir werden die folgenden Aspekte näher erläutern: wie man eine Benutzer-Anmeldeformularseite erstellt, wie man die vom Benutzer eingegebenen Informationen überprüft, wie man eine Benutzersitzung erstellt und wie man Benutzersitzungen in Webanwendungen verwendet.

1. Erstellen Sie ein Benutzeranmeldeformular
Damit sich Benutzer bei unserer Webanwendung anmelden können, müssen wir zunächst ein Benutzeranmeldeformular erstellen. Hier können wir HTML und CSS verwenden, um eine einfache und schöne Anmeldeformularseite zu erstellen. Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
  <title>用户登录</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    label {
      display: block;
      margin-bottom: 10px;
    }
    input {
      border: 1px solid #ccc;
      padding: 5px;
    }
    button {
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
      padding: 10px 20px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h1>用户登录</h1>
  <form method="POST" action="/login">
    <div>
      <label for="username">用户名</label>
      <input type="text" id="username" name="username" placeholder="请输入用户名">
    </div>
    <div>
      <label for="password">密码</label>
      <input type="password" id="password" name="password" placeholder="请输入密码">
    </div>
    <button type="submit">登录</button>
  </form>
</body>
</html>

Dieser Code verwendet einige grundlegende HTML- und CSS-Stile, um ein einfaches Anmeldeformular zu erstellen, einschließlich zwei Eingaben: Benutzername und Passwort. Feld und fügte am unteren Rand des Formulars eine Schaltfläche „Anmelden“ hinzu.

2. Überprüfen Sie die vom Benutzer eingegebenen Informationen.
Nachdem der Benutzer das Anmeldeformular abgeschickt hat, müssen wir überprüfen, ob der vom Benutzer eingegebene Benutzername und das Passwort korrekt sind. Hier können wir das Express-Framework von Node.js verwenden, um Formulardaten abzurufen und zu überprüfen. Das Folgende ist eine einfache Express-Routing-Verarbeitungsfunktion, die die POST-Anfrage vom Anmeldeformular empfängt und den übermittelten Benutzernamen und das Kennwort überprüft:

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));

app.post('/login', (req, res) => {
  const username = req.body.username;
  const password = req.body.password;
  // 进行验证
  if (username === 'admin' && password === '123456') {
    // 登录成功，创建会话
    req.session.user = username;
    res.redirect('/dashboard');
  } else {
    // 登录失败，显示错误信息
    res.render('login', { error: '用户名或密码错误' });
  }
});

Dieser Code verwendet den Body-Parser der Express-Middleware, um die Formulardaten zu analysieren und den übermittelten Benutzernamen und das Kennwort zu erhalten über das req.body-Objekt. Als nächstes überprüfen wir den Benutzernamen und das Passwort. Wenn die Überprüfung erfolgreich ist, kann eine Benutzersitzung erstellt werden (d. h. die Methode zum Speichern von Benutzerinformationen auf der Serverseite, die später im Detail beschrieben wird). zur Hauptseite der Anwendung weitergeleitet.

Wenn die Überprüfung fehlschlägt, können wir die Vorlagen-Engine in Express verwenden, um eine Fehlermeldungsseite zu rendern und die Fehlermeldung an die Vorlage zu übergeben. Der Code lautet wie folgt:

app.set('view engine', 'ejs');

app.get('/login', (req, res) => {
  res.render('login', { error: null });
});

app.post('/login', (req, res) => {
  const username = req.body.username;
  const password = req.body.password;
  // 进行验证
  if (username === 'admin' && password === '123456') {
    // 登录成功，创建会话
    req.session.user = username;
    res.redirect('/dashboard');
  } else {
    // 登录失败，显示错误信息
    res.render('login', { error: '用户名或密码错误' });
  }
});

Hier verwenden wir die EJS-Vorlagen-Engine in Express zum Rendern die Anmeldeseite und die Fehlermeldungsseite. Beachten Sie, dass die Fehlermeldung beim Rendern der Seite an die Vorlage übergeben werden muss.

3. Benutzersitzung erstellen
Im obigen Code haben wir das Erstellen einer Benutzersitzung erwähnt (d. h. wie Benutzerinformationen gespeichert werden). In Node.js können wir das Express-Session-Modul verwenden, um Benutzersitzungen zu erstellen und zu verwalten. Die Installation und Verwendung des Express-Session-Moduls ist sehr einfach. Fügen Sie Ihrer Anwendung einfach den folgenden Code hinzu:

const session = require('express-session');
app.use(session({
  secret: 'my-secret-key',
  resave: false,
  saveUninitialized: false
}));

Dieser Code verwendet das Express-Session-Modul, um eine Sitzungs-Middleware zu erstellen und ein Geheimnis zum Verschlüsseln von Sitzungsdaten festzulegen. Dieses Modul bietet auch einige andere Optionen, wie zum Beispiel die Optionen „resave“ und „saveUninitialized“ zum Konfigurieren der Persistenzeinstellungen der Sitzung. Hier setzen wir beide auf „false“, um die Standardeinstellungen zu verwenden.

Nachdem sich der Benutzer erfolgreich angemeldet hat, erstellen Sie eine Sitzung auf der Serverseite und speichern Sie die Benutzerinformationen in der Sitzung. Der Code lautet wie folgt:

req.session.user = username;

Auf diese Weise werden die Sitzungsdaten angezeigt, wenn sich der Benutzer erfolgreich anmeldet Auf der Serverseite gespeichert und der Benutzer Diese Sitzung kann für Vorgänge in nachfolgenden Webanwendungen verwendet werden.

4. Benutzersitzungen in Webanwendungen verwenden
Nachdem wir eine Benutzersitzung erstellt haben, müssen wir sie in Webanwendungen verwenden, um Benutzerauthentifizierung und Betriebsautorisierung sowie andere Funktionen zu implementieren. Express stellt das req.session-Objekt für den Zugriff auf Sitzungsdaten bereit, und wir können dieses Objekt verwenden, um verwandte Funktionen zu implementieren.

Wenn ein Benutzer beispielsweise auf eine Seite zugreift, für die eine Anmeldung erforderlich ist, können wir feststellen, ob der Benutzer bereits angemeldet ist, indem wir prüfen, ob der aktuelle Benutzer eine Sitzung hat. Wenn nicht, lautet der Code wie folgt:

app.get('/dashboard', (req, res) => {
  if (!req.session.user) {
    res.redirect('/login');
    return;
  }
  // 用户已登录，渲染页面
  res.render('dashboard');
});

Hier prüfen wir, ob Benutzerinformationen im req.session-Objekt vorhanden sind. Wenn ja, rendern Sie die Dashboard-Seite. Wenn nicht, leiten Sie zur Anmeldeseite weiter.

Darüber hinaus können wir Benutzersitzungen auch zur Autorisierung bei Vorgängen verwenden, die eine Benutzerauthentifizierung erfordern, wie zum Beispiel:

app.post('/delete', (req, res) => {
  if (!req.session.user) {
    res.sendStatus(401);
    return;
  }
  // 检查用户权限
  if (req.session.user !== 'admin') {
    res.sendStatus(403);
    return;
  }
  // 执行删除操作
  res.send('删除成功');
});

In diesem Code prüfen wir, ob die aktuelle Sitzung Benutzerinformationen enthält, und wenn nicht, geben wir einen 401-Statuscode zurück; Dann überprüfen wir die Berechtigungen des aktuellen Benutzers und geben einen 403-Statuscode zurück, wenn der Benutzer kein Administrator ist. Schließlich führen wir den Löschvorgang durch und geben eine erfolgreiche Antwort zurück.

Fazit
Durch die Einleitung dieses Artikels haben Sie bereits verstanden, wie Node.js die Benutzeranmeldefunktion implementiert. Sie haben gelernt, wie Sie Anmeldeformulare erstellen, Benutzerinformationen validieren, Benutzersitzungen erstellen und Benutzersitzungen in Webanwendungen verwenden, um Authentifizierungs- und Autorisierungsfunktionen zu implementieren. Natürlich beinhaltet die Implementierung der Benutzer-Login-Funktion auch viele weitere Details und Technologien, die wir nur als Referenz bereitstellen. Wenn Sie eine bessere Möglichkeit haben, es umzusetzen, teilen Sie es bitte mit.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Anmeldung in NodeJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript node.js 中间件 css html express Session JS 对象

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：nodejs, wie man Seite springt, Seite springen, Seite springen, Seite springenNächster Artikel：nodejs, wie man Seite springt, Seite springen, Seite springen, Seite springen

In Verbindung stehende Artikel

Mehr sehen