Vue ブラウザログアウトの実装例

Vue ブラウザログアウトの実装例

プロジェクトのニーズ: インターネット上でも類似の記事をたくさん見つけましたが、それらを使用するにはいくつか問題があります。結局のところ、自分のニーズに合うようにする必要があります。ここでは vue3 を使用していますが、理論的には vue2 も使用できます。私が書いた方法は普遍的です。

これらのメソッドはすべて、 beforeunloadunloadイベントに基づいて実行されます。
以下では、2 つのイベントの紹介について初心者向けチュートリアルと MDN を検索しましたが、自分で理解することもできます。

1. beforeunload イベント

1.1、初心者向けチュートリアル:

ここに画像の説明を挿入

1.2、MDN

ここに画像の説明を挿入

2. アンロードイベント

2.1、初心者向けチュートリアル

ここに画像の説明を挿入

2.2、MDN

ここに画像の説明を挿入
MDN: 一般的に、onunload に直接値を割り当てるのではなく、window.addEventListener() を使用して unload (en-US) イベントをリッスンすることをお勧めします。

使用したソースコードは以下に掲載しています。

3. ソースコード

3.1. 方法1: HTMLページに記述できる(直接使用)

      var _beforeUnload_time = 0、_gap_time = 0;
      window.onunload = 関数 (){
          _gap_time = 新しい Date().getTime() - _beforeUnload_time;
          if(_gap_time <= 10){//ブラウザを閉じる window.mgr.signoutRedirect();//このmgrはwindowで公開したログアウトメソッドです}else{//ブラウザを更新 - chrome refresh console.log(document.domain);
              return confirm("このシステムを終了してもよろしいですか?");
          }
      };
      window.onbeforeunload = 関数 (){
          _beforeUnload_time = 新しいDate().getTime();
      };

3.2. 方法2: app.vueなどのコンポーネントに記述できる(リスニングイベント)

  データ() {
    戻る {
      ギャップ時間: 0,
      アンロード前時間: 0,
    };
  },
  メソッド: {
    //ウィンドウを閉じる前に実行する beforeunloadHandler() {
      this.beforeUnload_time = 新しい Date().getTime();
    },
    アンロードハンドラ() {
      this.gap_time = 新しい Date().getTime() - this.beforeUnload_time;
      //ウィンドウが閉じられたか更新されたかをミリ秒単位で判断します。オンラインの読み取りのほとんどは5です。
      (this.gap_time <= 10)の場合{
        mgr.signoutRedirect(); // ログアウトインターフェースは個人用ログアウトメソッドに置き換える必要があります} else {
        console.log(ドキュメント.ドメイン);
        return confirm("このシステムを終了してもよろしいですか?");
      }
    },
  },
  unmounted(){//vue は destroyed() ライフサイクルに置き換えることができますが、これも使用できます // リスナーを削除します window.removeEventListener("beforeunload", () => this.beforeunloadHandler());
    window.removeEventListener("unload", () => this.unloadHandler());
  },
  マウント() {
    // ブラウザの終了をリッスンします。window.addEventListener("beforeunload", () => this.beforeunloadHandler());
    window.addEventListener("unload", () => this.unloadHandler());
  },

参考記事:
vue がブラウザを閉じると、イベントがトリガーされ、ログアウト インターフェースが実行されます。vue はブラウザを閉じてトークンをクリアします (更新を区別します)

これで、vue でのブラウザの終了とログアウトの実装に関するこの記事は終了です。より関連性の高い vue のブラウザの終了とログアウトのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • jsはブラウザを閉じるときにアカウントのログアウトを処理します

<<:  CSS スタイルにおける中国語フォントのフォントファミリーに対応する英語名の詳細な説明

>>:  MySQLデータベースのマスタースレーブレプリケーションの原理と機能の分析

推薦する

検証コード干渉を実装する js (静的)

この記事では、検証コード干渉を実装するためのjsの具体的なコードを参考までに共有します。具体的な内容...

Docker Enterprise Edition を使用して独自のプライベート レジストリ サーバーを構築する

Docker は本当に素晴らしいです。特に、仮想マシンを使用する場合に比べて、Docker イメージ...

Oracle VM VirtualBox の CentOS7 オペレーティング システムのインストール チュートリアル図

目次インストール手順環境設定実行構成インストール手順ダウンロードアドレス: バージョン6.0 最初に...

HTML テーブル マークアップ チュートリアル (40): ヘッダーの暗い境界線の色属性 BORDERCOLORDARK

テーブルヘッダーでは、暗い境界線の色を個別に定義できます。基本的な構文<TH 境界線の色を暗く...

MySQL インフラストラクチャ チュートリアル: クエリ ステートメント実行プロセスの詳細な説明

序文私は以前から、SQL 文がどのように実行され、どのような順序で実行されるのかを知りたいと思ってい...

nginx のフロントエンドとバックエンドに同じドメイン名を設定する方法

この記事では、主にnginxのフロントエンドとバックエンドに同じドメイン名を設定する方法を紹介し、皆...

vuex での mapState の考え方の応用

目次1. マップ方式2. 応用背景:需要開発プロセス中に、一部のインターフェースは、ページに表示する...

CMD で MySQL データベースを操作するときに中国語の文字化けが発生する問題の解決方法

Baiduで検索しました。 。 chcp コマンドを使用して、cmd の文字エンコーディングを 65...

MySQLの一般クエリログとスロークエリログの分析

MySQL のログには、エラー ログ、バイナリ ログ、一般クエリ ログ、スロー クエリ ログなどが含...

モバイルウェブページのサイズ調整を実装する方法

ようやく手元のプロジェクトが終了し、行方不明だった人たちが戻ってきました!プロジェクトを進める過程で...

Dockerはプライベートライブラリイメージを完全に削除します

まず、インターネット上の一般的な慣行を見てみましょうデフォルトでは、プライベート ライブラリはイメー...

Tomcat メモリ オーバーフロー問題の解決経験

少し前に、製品バージョンをテスト用にテスターに​​提出したのですが、テスト結果はまったく予想外のもの...

Win7 での Mysql 5.7.17 winx64 インストール チュートリアル

ソフトウェア バージョンとプラットフォーム: MySQL-5.7.17-winx64、win7 Ho...

Firefox の CSS を使用してデータを盗む

0x00 はじめに数か月前、Firefox に脆弱性 (CVE-2019-17016) があること...

GNU Parallelの具体的な使用法

それは何ですか? GNU Parallel は、1 台以上のコンピュータでコンピューティング タスク...