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 は、デッドロック問題を解決するために kill コマンドを使用します (実行中の特定の SQL ステートメントを強制終了します)。

MySQL を使用して特定のステートメントを実行すると、データ量が多いためにデッドロックが発生し、...

W3C チュートリアル (11): W3C DOM アクティビティ

ドキュメント オブジェクト モデル (DOM) は、プログラムがドキュメントのコンテンツ、構造、およ...

js の parseInt() の奇妙な動作の調査と修正

背景: parseInt(0.006) または parseInt(0.0006) は 0 という値を...

Element における複数データ読み込み最適化の実装

目次シナリオコードの実装要約:シナリオ最近、ElementUI をベースにしたバックグラウンド管理シ...

ネイティブ JS オブジェクト指向タイピング ゲーム

この記事では、JSオブジェクト指向タイピングゲームの具体的なコードを参考までに紹介します。具体的な内...

HTMLの空リンクの役割についての簡単な説明

空のリンク:つまり、ターゲット エンドポイントとのリンクはありません。フォーマット <a hr...

テーブルを作成するための HTML dl、dt、dd タグとテーブル作成テーブル

ウェブサイトの開発とメンテナンスのコストが削減されるだけでなく、コードもよりセマンティックになります...

JavaScript の setTimeout と setTimeinterval の使用例の説明

どちらの方法も、一定時間後に JavaScript コードを実行するために使用できますが、それぞれに...

CentOS に MySQL 5.5 をインストールするための完全な手順

目次1. インストール前の準備、インストールパッケージのダウンロード1 インストールの準備2 インス...

FirefoxでCookieとお気に入りをインポートおよびエクスポートする方法

Firefox は、多くの拡張機能とプラグインを備えた、よく使用されるブラウザです。IE に比べて多...

vue+elementuiは、共有箇条書きボックスの追加と変更の完全なコードを実装します。

目次1. 新しいII. 変更element-ui は、Ele.me のフロントエンド チームが開発者...

初心者向けウェブサイト構築チュートリアルの概要

これら 6 つの記事を書いた後、私は少し混乱し始めました。次にどこに書けばいいのか分かりません。ドメ...

HTML要素のID属性とName属性の違い

今日、私は <a href="#13"></a> につい...

コンテンツ領域の周囲を回転する CSS 動的グラデーション ボーダーの効果 (サンプル コード)

レンダリング ネットで関連情報を調べたところ、現在のダイナミックグラデーションボーダーの実装方法のほ...

MySQL スロークエリログの基本的な使い方チュートリアル

スロークエリログ関連のパラメータMySQL スロー クエリ関連のパラメータの説明: slow_que...