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構成SSL証明書ログインの実装

目次序文1. MySQLはSSL構成を有効にする1.1 SSLが有効になっているかどうかを確認する1...

初心者のための HTML コーディングガイドライン 30 選

1. HTMLタグは常に閉じる前のページのソース コードでは、次のような記述がよく見られます。 &l...

Windows 8 での ssh コマンドの使用記録

1. 仮想マシンとgit bashウィンドウを開き、接続の準備をします2. 仮想マシンでifconf...

CSS 境界線の半分または部分的に表示される実装コード

1. 疑似クラスを使用して境界線の半分を表示する <!DOCTYPE html> <...

ミニプログラム開発ツールのソースコードからの基本実装の分析

目次ミニプログラム開発者ツールのソースコードを表示する方法ミニプログラムアーキテクチャ設計1. ミニ...

Vue はシェイク機能を実装します (ios13.3 以降と互換性があります)

最近、shake.jsを使用して、shakeに似た機能を作成しました。ただし、shake機能はios...

MySQL 学習: 初心者のための 3 つのパラダイム

目次1. パラダイム基盤1.1 パラダイムの概念2. 3つの主要なパラダイム2.1 3つの主要なパラ...

Vue+Element UI でサマリーポップアップウィンドウを実装するプロセス全体

シナリオ: 検査文書には n 個の検査詳細があり、検査詳細には n 個の検査項目があります。実装効果...

CSS3 の Flex レイアウトの詳細な分析

Flexbox レイアウト モジュールは、コンテナー内のスペースをより効率的に配分する方法を提供する...

CSSファイルをインポートする3つの方法の詳細な説明

CSS を導入する方法には、インライン スタイル、内部スタイル シート、外部スタイル シートの 3 ...

Svelte の Defer Transition を Vue で実装する方法

最近、Rich Harris の <Rethinking Reactivity> ビデオ...

MySQL データベース内の数十億のデータを素早くクリーンアップする方法

今日、ディスクアラーム例外を受け取りました。50G ディスクが爆発しました。分析と解決のプロセスは次...

高速レイアウトのための CSS ビューポート単位

CSS ビューポート ユニットはここ数年登場しており、時が経つにつれて、ますます多くの開発者が使用し...

Docker Secretの管理と使用の詳細な説明

1. Docker Secretとは1. シナリオ表示MySQL サービスなど、一部のサービスではパ...