Express フレームワークでセッションを使用してログイン時の認証を実装する-jsチュートリアル-php.cn

Express フレームワークでセッションを使用してログイン時の認証を実装する

巴扎黑

リリース： 2017-09-09 09:51:41

オリジナル

1653 人が閲覧しました

この記事では、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(&#39;express&#39;);
var app = express();
var session = require(&#39;express-session&#39;);
var bodyparser = require(&#39;body-parser&#39;);
// 下面三行设置渲染的引擎模板
app.set(&#39;views&#39;, __dirname); //设置模板的目录
app.set(&#39;view engine&#39;, &#39;html&#39;); // 设置解析模板文件类型：这里为html文件
app.engine(&#39;html&#39;, require(&#39;ejs&#39;).__express); // 使用ejs引擎解析html文件中ejs语法
app.use(bodyparser.json()); // 使用bodyparder中间件，
app.use(bodyparser.urlencoded({ extended: true }));
// 使用 session 中间件
app.use(session({
  secret : &#39;secret&#39;, // 对session id 相关的cookie 进行签名
  resave : true,
  saveUninitialized: false, // 是否保存未初始化的会话
  cookie : {
    maxAge : 1000 * 60 * 3, // 设置 session 的有效时间，单位毫秒
  },
}));
// 获取登录页面
app.get(&#39;/login&#39;, function(req, res){
  res.sendFile(__dirname + &#39;/login.html&#39;)
});
// 用户登录
app.post(&#39;/login&#39;, function(req, res){
  if(req.body.username == &#39;admin&#39; && req.body.pwd == &#39;admin123&#39;){
    req.session.userName = req.body.username; // 登录成功，设置 session
    res.redirect(&#39;/&#39;);
  }
  else{
    res.json({ret_code : 1, ret_msg : &#39;账号或密码错误&#39;});// 若登录失败，重定向到登录页面
  }
});
// 获取主页
app.get(&#39;/&#39;, function (req, res) {
  if(req.session.userName){ //判断session 状态，如果有效，则返回主页，否则转到登录页面
    res.render(&#39;home&#39;,{username : req.session.userName});
  }else{
    res.redirect(&#39;login&#39;);
  }
})
// 退出
app.get(&#39;/logout&#39;, function (req, res) {
  req.session.userName = null; // 删除session
  res.redirect(&#39;login&#39;);
});
app.listen(8000,function () {
  console.log(&#39;http://127.0.0.1:8000&#39;)
})

ログイン後にコピー

この時点で、セッションログインの検証は完了です。上記の例では、セッションはサービスメモリに保存されていますが、セッションミドルウェアを構成するだけで、ファイルまたはデータベースに保存することもできます。

app.use(session({
  secret: &#39;secretkey&#39;,
  store: new MongoStore({
    db: &#39;sessiondb&#39;
  })
}));

ログイン後にコピー

もちろん、上記のコードはセッションを MongoDB データベースに保存します。具体的な参考のために、いくつかの設定があります:

https://www.npmjs.com/package/express-session

以上がExpress フレームワークでセッションを使用してログイン時の認証を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。