ホームページ >ウェブフロントエンド >jsチュートリアル >Express フレームワークでセッションを使用してログイン時の認証を実装する
Express フレームワークでセッションを使用してログイン時の認証を実装する
- 巴扎黑オリジナル
- 2017-09-09 09:51:411660ブラウズ
この記事では、Sessionを使用してExpressフレームワークでユーザーログイン認証を実装する方法を主に紹介します。興味のある方は、エクスプレス セッションのログイン認証に関する知識をご覧ください
1. 前に書いてあります
Web サイトにログインすると、しばらくしてからログアウトせずに Web サイトを閉じます。 , この Web サイトを再度開くと、ログインしたままになります。これは、Web サイトにログインすると、ログアウトするか、保存されたログイン ステータスの有効期限が切れるまで、サーバーがログイン ステータスを保存するためです。では、サーバーはログインステータスをどのように保存するのでしょうか? 答えはセッションです。サービスはこれを通じて各クライアント接続のステータスを記録できます。ここでは、Session の原理についてはあまり説明しません。この記事では、Session を使用して Express フレームワークでユーザーのログイン認証を実装する方法を主に紹介します。
2. 環境設定
Node環境にはExpressとSessionの統合ライブラリがないため、まずプロジェクトディレクトリを作成し、プロジェクトのルートディレクトリにインストールする必要があります。次のコマンドを使用して 4 つのモジュールをインストールします。
1) Express
このモジュールを使用すると、Web 開発フレームワークを迅速に構築できます。
2) body-parser
このモジュールは Express モジュールのミドルウェアであり、ブラウザーによって送信された本文データの解析を容易にします。
3) Express-session
このモジュールは Express モジュールのミドルウェアでもあり、クライアント セッションの処理を容易にします。
4) ejs
このモジュールはレンダリング エンジンです。 バックグラウンド変数データをフロントページにバインドすると便利です。
インストールは次のとおりです:
npm install express --save npm install body-parser --save npm install express-session --save npm install ejs --save
3. ログインと検証
セッションはサーバー上のクライアントのステータスをマークできます。これを使用して、クライアント側のログイン検証を実装できます。セッション ログイン検証のプロセスは大まかに次のとおりです。クライアントがログインしていないときにホームページをリクエストした場合、サーバーはクライアントのログイン後にリクエストをログイン ページにリダイレクトします。サーバーはクライアントのログイン ステータスを記録して保存する必要があります。アクティビティ期間を指定すると、次回サーバーがホームページをリクエストしたときに、クライアントのログイン ステータスを判断できるようになります。ログイン ステータスが有効な場合は、クライアントが必要とするページに直接戻ります。そうでない場合は、ログインにリダイレクトします。ページ。
セッションの有効期限について、セッションの有効期限が設定されていない場合、サーバーは、独自の構成のデフォルトの有効期間に従って、長期間サーバーと対話しなかったセッションを削除します。
サンプルコードは以下に掲載されています。インターフェイスは比較的シンプルで、サーバーのバックグラウンドコードのコメントが明確に書かれているため、再度説明しません。
プロジェクトのディレクトリ構造は次のとおりです:
ログインページ (login.html) コードは次のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
</style>
</head>
<body>
<form action="/login" method="POST">
用户名: <input type="text" name="username"/> <br>
密码: <input type="password" name="pwd"/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>ホームページ (home.html) のコードは次のとおりです:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>用户名：<span><%= username %> </span> <a href="/logout" rel="external nofollow" >退出登录</a></p> </body> </html>
サーバー (app.js) コードは次のとおりです:
/**
* Created by tjm on 9/7/2017.
*/
var express = require('express');
var app = express();
var session = require('express-session');
var bodyparser = require('body-parser');
// 下面三行设置渲染的引擎模板
app.set('views', __dirname); //设置模板的目录
app.set('view engine', 'html'); // 设置解析模板文件类型：这里为html文件
app.engine('html', require('ejs').__express); // 使用ejs引擎解析html文件中ejs语法
app.use(bodyparser.json()); // 使用bodyparder中间件，
app.use(bodyparser.urlencoded({ extended: true }));
// 使用 session 中间件
app.use(session({
secret : 'secret', // 对session id 相关的cookie 进行签名
resave : true,
saveUninitialized: false, // 是否保存未初始化的会话
cookie : {
maxAge : 1000 * 60 * 3, // 设置 session 的有效时间，单位毫秒
},
}));
// 获取登录页面
app.get('/login', function(req, res){
res.sendFile(__dirname + '/login.html')
});
// 用户登录
app.post('/login', function(req, res){
if(req.body.username == 'admin' && req.body.pwd == 'admin123'){
req.session.userName = req.body.username; // 登录成功，设置 session
res.redirect('/');
}
else{
res.json({ret_code : 1, ret_msg : '账号或密码错误'});// 若登录失败，重定向到登录页面
}
});
// 获取主页
app.get('/', function (req, res) {
if(req.session.userName){ //判断session 状态，如果有效，则返回主页，否则转到登录页面
res.render('home',{username : req.session.userName});
}else{
res.redirect('login');
}
})
// 退出
app.get('/logout', function (req, res) {
req.session.userName = null; // 删除session
res.redirect('login');
});
app.listen(8000,function () {
console.log('http://127.0.0.1:8000')
})この時点で、セッション ログインの検証は完了です。上記の例では、セッションはサービス メモリに保存されていますが、セッション ミドルウェアを構成するだけで、ファイルまたはデータベースに保存することもできます。
app.use(session({
secret: 'secretkey',
store: new MongoStore({
db: 'sessiondb'
})
}));もちろん、上記のコードはセッションを MongoDB データベースに保存します。具体的な参考のために、いくつかの設定があります:
https://www.npmjs.com/package/express-session
以上がExpress フレームワークでセッションを使用してログイン時の認証を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。