ホームページ >ウェブフロントエンド >フロントエンドQ&A >Nodejs はログインリクエストを処理します
Nodejs はログインリクエストを処理します
- WBOYオリジナル
- 2023-05-13 20:25:06566ブラウズ
インターネットの継続的な発展に伴い、ユーザーのログインはインターネット サービスの重要な機能になりました。ログイン リクエストの処理も、Node.js では非常に一般的なタスクです。この記事では、Node.js を使用してユーザーのログイン要求を処理する方法を説明します。
ステップ 1: 環境をセットアップする
ログイン要求の処理を開始する前に、Node.js、Express フレームワーク、および関連する依存ライブラリのインストールなどの環境をセットアップする必要があります。ここでは、Express フレームワークを例として説明します。
コマンド ラインに次のコマンドを入力してインストールします:
npm install express --save npm install body-parser --save npm install express-session --save
ここで使用する依存ライブラリには次のものが含まれます:
- Express: シンプルな Web アプリケーション プログラム フレームワークを提供します。 ;
- body-parser: HTTP リクエスト本文のデータを解析するために使用されます;
- express-session: シンプルで使いやすいセッション管理機能を提供します。
ステップ 2: フロントエンド インターフェイスの実装
ログイン要求を処理する前に、単純なフロントエンド インターフェイスを実装する必要があります。ここでは、HTML と JavaScript を使用してそれを実現します。
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 }));
});
};ここでは、単純なログイン フォームを実装し、XMLHttpRequest オブジェクトを通じてフォーム データをサーバーに送信します。データを送信するときは、リクエスト ヘッダーの Content-Type を application/json 形式に設定することに注意してください。
ステップ 3: ログイン リクエストを処理する
シンプルなフロントエンド インターフェイスを実装したので、サーバー側でログイン リクエストを受信して処理する必要があります。
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 リクエストを処理します。ユーザー名とパスワードが正しい場合は、それをセッションに保存して応答を返します。そうでない場合は、別の応答を返します。
リクエストを処理する前に、body-parser ミドルウェアを使用して HTTP リクエスト本文内の JSON 形式のデータを解析し、express-session # を使用したことに注意してください。 ##セッション管理機能を提供するミドルウェア。
<!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 リクエストを処理します。現在のユーザーがログインしている場合は、応答を返します。それ以外の場合は、別の 1 つの応答を返します。
<!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 メソッドを使用して現在のセッションを破棄し、ログアウト機能を実現します。
以上がNodejs はログインリクエストを処理しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：sshでnodejsをインストール次の記事：sshでnodejsをインストール