ノードの実践: ログイン検証に Cookie とセッションを使用する
元アドレス: https://ailjx.blog.csdn.net/article/details/127909213著者: 海中BBQレストラン ai前のセクションでは、シンプルなユーザー管理システムのプロジェクト構造を作成して最適化し、
Cookie セッションのログイン検証の動作原理についても説明しました。本システムの機能 ここでは実際にCookie-Sessionを利用して本システムのログイン認証機能を実装していきます。 [関連チュートリアルの推奨事項: nodejs ビデオ チュートリアル ]
セッション、クッキーをまだ理解していません!前の記事を確認してください: Cookie セッション ログイン認証の仕組みの詳細な説明
##1️⃣ ページ ルーティングの定義#vies
ディレクトリに新しいlogin.ejs を作成します:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="登录页面">登录页面</h1>
<div>用户名：<input type="text" id="username"></div>
<div>密码：<input type="password" id="password"></div>
<div><button id="login">登录</button></div>
<script>
const uname = document.getElementById("username");
const pwd = document.getElementById("password");
const login = document.getElementById("login");
login.onclick = () => {
fetch('/api/login', {
method: 'POST',
body: JSON.stringify({
username: uname.value,
password: pwd.value
}),
headers: {
"Content-Type": "application/json"
}
}).then(res => res.json()).then(res => {
// console.log(res);
if (res.ok) {
location.href = "/"
} else {
alert("用户名密码不匹配！")
}
})
}
</script>
</body>
</html>Requestディレクトリに新しいroutes
login.js を作成します。このファイルは、login## のページ ルーティングを定義します。 # page: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>var express = require("express");
var router = express.Router();
/* GET login page. */
router.get("/", function (req, res, next) {
res.render("login");
});
module.exports = router;</pre><div class="contentsignin">ログイン後にコピー</div></div>app.js にページ ルーティングをマウントします:
// 引入
var loginRouter = require("./routes/login");
// 挂载
app.use("/login", loginRouter);プロジェクトを開始し、http://localhost:3000/login## にアクセスします。 #通常表示:
##2️⃣ 
services/UserService.js に API インターフェース
を定義します インターフェイスのモデル (M 層 ) を定義します。
const UserService = {
// .......
// 登录查询
login: (username, password) => {
// 向数据库查询该用户
return UserModel.findOne({ username, password });
},
}; インターフェイスの制御層 (C 層 ) を controllers/ で定義します。 UserController.js :
const UserController = {
// ......
// 登录验证
login: async (req, res, next) => {
try {
const { username, password } = req.body;
const data = await UserService.login(username, password);
// console.log(data);
if (data) {
res.send({ ok: 1, msg: "登录成功!", data });
} else {
res.send({ ok: 0, msg: "用户不存在，登录失败!" });
}
} catch (error) {
console.log(error);
}
},
}; routes/users.js で Api を定義します:
// 登录校验
router.post("/login", UserController.login); この時点で、ログイン ページは次のようになります。セットアップ:
3️⃣ セッションの設定
前のセクションのCookie-Sessionログイン検証の仕組み 冒頭でわかったこと:
図 1
があります。 ##express
Express-session
express-session:
npm i express-session
// 引入express-session
var session = require("express-session");
// 配置session：需要放在在路由配置的前面
app.use(
session({
name: "AilixUserSystem", // cookie名字
secret: "iahsiuhaishia666sasas", // 密钥：服务器生成的session的签名
cookie: {
maxAge: 1000 * 60 * 60, // 过期时间：一个小时过期
secure: false, // 为true时表示只有https协议才能访问cookie
},
resave: true, // 重新设置session后会重新计算过期时间
rolling: true, // 为true时表示：在超时前刷新时cookie会重新计时；为false表示：在超时前无论刷新多少次，都是按照第一次刷新开始计时
saveUninitialized: true, // 为true时表示一开始访问网站就生成cookie，不过生成的这个cookie是无效的，相当于是没有激活的信用卡
})
);設定後、次のことがわかります。ブラウザに AilixUserSystem という名前の cookie があることを確認します。
これは、express-session が原因です。自動的に
を解析し、
cookie
3 と 6 に相当します (前半: SessionId## によるクエリ) #セッション)、cookieを手動で操作する必要はなくなりました。 #4️⃣ 権限の確認ログイン成功時に設定session
// controllers/UserController.js
// ....
// 登录校验
login: async (req, res, next) => {
try {
const { username, password } = req.body;
const data = await UserService.login(username, password);
// console.log(data);
if (data) {
// 设置session：向session对象内添加一个user字段表示当前登录用户
req.session.user = data; // 默认存在内存中，服务器一重启就没了
res.send({ ok: 1, msg: "登录成功!", data });
} else {
res.send({ ok: 0, msg: "用户不存在，登录失败!" });
}
} catch (error) {
console.log(error);
}
},ログイン後にコピー# をリクエストしますユーザーのログイン情報を保存するために、user フィールドが ##req.session に追加されます。この手順は、図 1 の #1 に相当します (SessionId は
express-session // controllers/UserController.js
// ....
// 登录校验
login: async (req, res, next) => {
try {
const { username, password } = req.body;
const data = await UserService.login(username, password);
// console.log(data);
if (data) {
// 设置session：向session对象内添加一个user字段表示当前登录用户
req.session.user = data; // 默认存在内存中，服务器一重启就没了
res.send({ ok: 1, msg: "登录成功!", data });
} else {
res.send({ ok: 0, msg: "用户不存在，登录失败!" });
}
} catch (error) {
console.log(error);
}
},Module になります)自動的に生成されます)、2。
req.session は session オブジェクトです。このオブジェクトは req に存在しますが、実際にはreq.session
cookieこのコードでは、に基づいているため、ユーザーがシステムにアクセスするときの
req.sessionは異なります (によってExpress-sessionモジュール (AilixUserSystem) によって自動的に生成され、システムにアクセスする各ユーザーによって生成されるcookie は一意であるため、そのreq はsessionもユニークです。リクエストを受信したらsessionを確認し、次のコードをapp.js に追加します:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// 设置中间件：session过期校验 app.use((req, res, next) => { // 排除login相关的路由和接口 // 这个项目中有两个，一个是/login的页面路由，一个是/api/login的post api路由，这两个路由不能被拦截 if (req.url.includes("login")) { next(); return; } if (req.session.user) { // session对象内存在user，代表已登录，则放行 // 重新设置一下session，从而使session的过期时间重新计算（在session配置中配置了： resave: true） // 假如设置的过期时间为1小时，则当我12点调用接口时，session会在1点过期，当我12点半再次调用接口时，session会变成在1点半才会过期 // 如果不重新计算session的过期时间，session则会固定的1小时过期一次，无论这期间你是否进行调用接口等操作 // 重新计算session的过期时间的目的就是为了防止用户正在操作时session过期导致操作中断 req.session.myData = Date.now(); // 放行 next(); } else { // session对象内不存在user，代表未登录 // 如果当前路由是页面路由，，则重定向到登录页 // 如果当前理由是api接口路由，则返回错误码（因为针对ajax请求的前后端分离的应用请求，后端的重定向不会起作用，需要返回错误码通知前端，让前端自己进行重定向） req.url.includes("api") ? res.status(401).send({ msg: "登录过期！", code: 401 }) : res.redirect("/login"); } });</pre><div class="contentsignin">ログイン後にコピー</div></div>注: これコードはルーティング設定の前にある必要があります。
req.session.myData = Date.now(); を通じて session オブジェクトを変更し、それによって session をトリガーします。
myDataこの属性とその値の
session
Date.now()session オブジェクトを変更するだけですツール、 自体には意味がありません )、req.session を変更できる限り、他の方法を使用することもできます。
因为我们这个项目是后端渲染模板的项目，并不是前后端分离的项目，所以在配置中间件进行session过期校验拦截路由时需要区分Api路由和页面路由。
后端在拦截API路由后，向前端返回错误和状态码：
这个时候需要让前端自己对返回结果进行判断从而进行下一步的操作（如回到登录页或显示弹窗提示），该系统中前端是使用JavaScript内置的fetch来进行请求发送的，通过它来对每一个请求结果进行判断比较麻烦，大家可以自行改用axios，在axios的响应拦截器中对返回结果做统一的判断。
5️⃣ 退出登录
向首页（index.ejs）添加一个退出登录的按钮：
<button id="exit">退出登录</button>
为按钮添加点击事件：
const exit = document.getElementById('exit')
// 退出登录
exit.onclick = () => {
fetch("/api/logout").then(res => res.json()).then(res => {
if (res.ok) {
location.href = "/login"
}
})
}这里调用了GET /api/logout接口，现在定义一下这个接口，在controllers/UserController.js中定义接口的控制层（C层）：
const UserController = {
// ......
// 退出登录
logout: async (req, res, next) => {
// destroy方法用来清除cookie，当清除成功后会执行接收的参数（一个后调函数）
req.session.destroy(() => {
res.send({ ok: 1, msg: "退出登录成功！" });
});
},
};在routes/users.js中定义Api路由：
// 退出登录
router.get("/logout", UserController.logout);6️⃣ 链接数据库
前面我们通过 req.session.user = data;设置的session默认是存放到内存中的，当后端服务重启时这些session就会被清空，为了解决这一问题我们可以将session存放到数据库中。
安装connect-mongo：
npm i connect-mongo
connect-mongo是MongoDB会话存储，用于用
Typescript编写的连接和Express。
修改app.js：
// 引入connect-mongo
var MongoStore = require("connect-mongo");
// 配置session
app.use(
session({
name: "AilixUserSystem", // cookie名字
secret: "iahsiuhaishia666sasas", // 密钥：服务器生成的session的签名
cookie: {
maxAge: 1000 * 60 * 60, // 过期时间：一个小时过期
secure: false, // 为true时表示只有https协议才能访问cookie
},
resave: true, // 重新设置session后会重新计算过期时间
rolling: true, // 为true时表示：在超时前刷新时cookie会重新计时；为false表示：在超时前无论刷新多少次，都是按照第一次刷新开始计时
saveUninitialized: true, // 为true时表示一开始访问网站就生成cookie，不过生成的这个cookie是无效的，相当于是没有激活的信用卡
store: MongoStore.create({
mongoUrl: "mongodb://127.0.0.1:27017/usersystem_session", // 表示新建一个usersystem_session数据库用来存放session
ttl: 1000 * 60 * 60, // 过期时间
}), // 存放数据库的配置
})
);至此，我们就实现了运用Cookie&Session进行登录验证/权限拦截的功能！
更多node相关知识，请访问：nodejs 教程！
以上がノードの実践: ログイン検証に Cookie とセッションを使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7488
15
1377
52
77
11
19
40
nvmでノードを削除する方法
Dec 29, 2022 am 10:07 AM
nvm でノードを削除する方法: 1. 「nvm-setup.zip」をダウンロードして C ドライブにインストールします; 2. 「nvm -v」コマンドで環境変数を構成し、バージョン番号を確認します; 3. 「nvm」を使用しますinstall" コマンド ノードのインストール; 4. "nvm uninstall" コマンドでインストールしたノードを削除します。
Express を使用してノード プロジェクトでファイルのアップロードを処理する方法
Mar 28, 2023 pm 07:28 PM
ファイルのアップロードをどのように処理するか?次の記事では、Express を使用してノード プロジェクトでファイルのアップロードを処理する方法を紹介します。
Nodeのプロセス管理ツール「pm2」を徹底分析
Apr 03, 2023 pm 06:02 PM
この記事では、Node のプロセス管理ツール「pm2」について説明し、pm2 が必要な理由、pm2 のインストール方法と使用方法について説明します。皆様のお役に立てれば幸いです。
PIノードティーチング：PIノードとは何ですか？ PIノードをインストールしてセットアップする方法は？
Mar 05, 2025 pm 05:57 PM
ピン張りのノードの詳細な説明とインストールガイドこの記事では、ピネットワークのエコシステムを詳細に紹介します - PIノードは、ピン系生態系における重要な役割であり、設置と構成の完全な手順を提供します。 Pinetworkブロックチェーンテストネットワークの発売後、PIノードは多くの先駆者の重要な部分になり、テストに積極的に参加し、今後のメインネットワークリリースの準備をしています。まだピン張りのものがわからない場合は、ピコインとは何かを参照してください。リストの価格はいくらですか？ PIの使用、マイニング、セキュリティ分析。パインワークとは何ですか？ピン競技プロジェクトは2019年に開始され、独占的な暗号通貨PIコインを所有しています。このプロジェクトは、誰もが参加できるものを作成することを目指しています
pkg を使用して Node.js プロジェクトを実行可能ファイルにパッケージ化する方法について説明します。
Dec 02, 2022 pm 09:06 PM
Nodejs実行可能ファイルをpkgでパッケージ化するにはどうすればよいですか?次の記事では、pkg を使用して Node プロジェクトを実行可能ファイルにパッケージ化する方法を紹介します。
npm ノード gyp が失敗した場合の対処方法
Dec 29, 2022 pm 02:42 PM
「node-gyp.js」が「Node.js」のバージョンと一致しないため、npm node gyp が失敗します。解決策は次のとおりです: 1. 「npm cache clean -f」を使用してノード キャッシュをクリアします; 2. 「npm install -」を使用します。 g n" n モジュールをインストールします。 3. 「n v12.21.0」コマンドを使用して、「node v12.21.0」バージョンをインストールします。
シングルサインオンシステムとは何ですか? Nodejsを使用して実装するにはどうすればよいですか?
Feb 24, 2023 pm 07:33 PM
シングルサインオンシステムとは何ですか? Nodejsを使用して実装するにはどうすればよいですか?次の記事ではnodeを使ってシングルサインオンシステムを実現する方法を紹介しますので、参考になれば幸いです。
Angular と Node を使用したトークンベースの認証
Sep 01, 2023 pm 02:01 PM
認証は、Web アプリケーションの最も重要な部分の 1 つです。このチュートリアルでは、トークンベースの認証システムと、それが従来のログイン システムとどのように異なるかについて説明します。このチュートリアルを終えると、Angular と Node.js で書かれた完全に動作するデモが表示されます。従来の認証システム トークンベースの認証システムに進む前に、従来の認証システムを見てみましょう。ユーザーはログイン フォームにユーザー名とパスワードを入力し、[ログイン] をクリックします。リクエストを行った後、データベースにクエリを実行してバックエンドでユーザーを認証します。リクエストが有効な場合、データベースから取得したユーザー情報を使用してセッションが作成され、セッション情報が応答ヘッダーで返され、セッション ID がブラウザに保存されます。対象となるアプリケーションへのアクセスを提供します。
