jsはブラウザを閉じるときにアカウントのログアウトを処理します

jsはブラウザを閉じるときにアカウントのログアウトを処理します

古典的なアプローチ

ご存知のとおり、アカウントのセキュリティのため、ユーザーが積極的にクリックしてシステムからログアウトしない場合は、ブラウザまたはタブを直接閉じてシステムから強制的にログアウトする方法は次のとおりです。

//閉じるときにログアウトインターフェースを呼び出す window.onbeforeunload = function() {
 // ログアウトの Ajax 呼び出しを実行します。簡単な例 $.ajax({url:"/logout"});
};

質問

この方法には重大な問題があります。ページを更新するとログアウトが呼び出されます。多くのシステムでは、セッションを維持するためにページの更新をサポートする必要があります。どのように対処すればよいでしょうか?

解決策はありませんが、機能します:

//閉じるときにログアウトインターフェースを呼び出す window.onbeforeunload = function() {
 // ログアウトの ajax 呼び出しを実行し、フラグを渡して、バックエンドにログアウトを遅延するように指示します$.ajax({url:"/logout"},data:{delay:true});
};

バックグラウンド ログアウト インターフェイスは、遅延フラグに従ってタイマーを設定し、ログアウトを遅延します。たとえば、5 秒のタイマーが設定されている場合、アプリケーション システム セッションは実際には 5 秒後にログアウトされます。

同時に、フロントエンド ページが読み込まれた後、クリア ログアウト インターフェイスをすぐに呼び出して、バックグラウンドに遅延ログアウト タイマーを削除するように指示し、ページが更新されてアプリケーション セッションが維持されるときに、以前のログアウト操作が破棄されるようにする必要があります。

その他の質問

バックグラウンド タイマーの遅延はどの程度まで信頼できますか? もちろん、短いほど良いと期待しています。短いほど、ユーザーがブラウザを閉じてページを再度開いたときにセッションが復元されなくなるからです。たとえば、バックグラウンドで 5 秒のタイマーが設定されているとします。ユーザーがブラウザを閉じてからページを再度開くまでの間隔が 5 秒を超える限り、セッションは復元されず、ユーザーはログイン ページに再度アクセスすることになります。 もちろん、ユーザーの手の速度が速すぎて、5 秒以内にページが再度開かれた場合は、以前のセッションが正常に開始されます。もちろん、悪意のあるユーザーは、ユーザーが離れたコンピューターを使用してページを非常に速く開くことはできないため、これは深刻な問題を引き起こすことはありません。

それでどうする? 何秒の遅延を設定する必要がありますか? これは、フロントエンド コードがページの読み込み時に遅延ログアウト タイマーをクリアするためにいつ呼び出すかによって異なります。重要な点は、早ければ早いほど良いということです。
もっと早くはどうですか? もちろん、この呼び出しをホームページのできるだけ早い段階でコードに配置する必要があります。次に例を示します。

<html マニフェスト="">
 <ヘッド>
  <meta http-equiv="X-UA-compatible" content="IE=edge">
  <メタ文字セット="UTF-8">
  <meta http-equiv="プラグマ" content="キャッシュなし">
  <meta http-equiv="キャッシュコントロール" content="キャッシュなし">
  <meta http-equiv="有効期限" content="0">
  
  <script type="text/javascript">
   // 遅延ログアウト タイマーをできるだけ早く呼び出してクリアするには、元の XMLHttpRequest メソッドを使用して呼び出します。var xhr = new XMLHttpRequest();
   もし(xhr){
    xhr.open("POST", '/clearlogout', true);
    xhr.send();
   }
  </スクリプト>

  ......

上記の処理の後、通常のネットワーク条件下では、ページの更新操作により、遅延ログアウトの呼び出しと遅延ログアウトのクリアの間の時間間隔が非常に短くなることが保証されます。一般的に、5 秒がより合理的な遅延値です。
このメカニズムを使用すると、安全性を高めたいのか、よりリフレッシュしたエクスペリエンスを確保したいのかなど、好みに応じて遅延呼び出しタイマーを延長するか短縮するかを決定できます。

注意が必要な問題

明らかに、上記のメカニズムはバックエンドの 2 層セッション メカニズムに依存する必要があります。前提として、まずページの更新セッション保持をサポートする必要があるため、表面層は Web フレームワーク自体のセッションであり、内部層はアプリケーション層セッションです。 表面セッションはクッキーに依存し、内部アプリケーションセッションはバックグラウンドキャッシュメカニズムまたはデータベースに依存します。

jsを使用してブラウザを閉じるときにアカウントからログアウトする方法についての記事はこれで終わりです。jsを使用してブラウザを閉じるときにアカウントからログアウトする方法の詳細については、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を続けて閲覧してください。今後とも123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません:
  • Vue ブラウザログアウトの実装例

<<:  CSS 命名: BEM、スコープ付き CSS、CSS モジュール、CSS-in-JS の説明

>>:  MySQL マルチインスタンス インストール ブート自動起動サービス設定プロセス

推薦する

MySQL 5.7.20 圧縮版のダウンロードとインストールの簡単なチュートリアル

1. ダウンロードアドレス:参考: http://dev.mysql.com/downloads/m...

Linux で環境変数 JAVA_HOME を変更/設定する方法について簡単に説明します。

1. 永久的な変更、すべてのユーザーに有効# vi /etc/プロファイル//キーボードの[Shi...

MySQL 入門 - SQL 実行プロセス

目次1. プロセス2. コアアーキテクチャ2.1 サーバー層の基本コンポーネントの紹介3. ステート...

HiveメタデータをMySQLに設定するプロセス全体

Hiveのインストールディレクトリで、confディレクトリに入り、hive-site.xmlファイル...

vue ルーティング ビュー router-view のネストされたジャンプの実装

目次1. app.vueページを修正する2. ログインページを作成する (/views/login/...

CSS が初期読み込み時の白い画面の時間に与える影響

外部 CSS ファイルを使用したレンダリング パイプライン上図では、HTML データの要求から DO...

Dockerコンテナでルート権限を取得する方法

まず、コンテナが稼働している必要がありますコンテナのCONTAINER IDは、sudo docke...

LinuxにPHP7をインストールする方法の詳細な説明

Linux に PHP7 をインストールするにはどうすればいいですか? 1. 依存パッケージをインス...

MySQL における 8 つの一般的な SQL 使用例

序文MySQL は、2016 年もデータベースの人気において力強い成長傾向を維持し続けました。 My...

CSS3 変換遷移ジッター問題の解決

transform: scale(); スケーリングするとIEブラウザでジッターが発生します変換スケ...

WeChatアプレットがシンプルな計算機機能を実装

WeChatアプレット:シンプルな計算機、参考までに、具体的な内容は次のとおりです。ミニプログラムに...

Zabbixは複数のmysqlプロセスの監視を実装します

1 つのサーバー上で 3 つの MySQL インスタンス プロセスが開始され、それぞれ異なるポート ...

Vueライフサイクル機能の詳細な説明

目次ライフサイクル関数一般的なライフサイクルフックVue のインスタンス破棄について:要約するライフ...

ウェブフロントエンドウェブ開発の一般的なプロセスの簡単な紹介

フロントエンド開発を行っている初心者の学生を多く見かけますが、彼らの効率は比較的遅いです。常にコード...

Centos7のFirewalldファイアウォールの基本コマンドの詳細な説明

1. Linuxファイアウォールの基礎Linux ファイアウォール システムは主にネットワーク層で動...