自動ロック画面機能を実現するjs

自動ロック画面機能を実現するjs

1. 使用シナリオ

このような要件があるため、システムが開発されました。ユーザーがデスクトップを離れたり、一定時間操作しなかったりすると、デスクトップのロック画面と同様に、システムの開いているすべてのページがロックされる必要があります。確認のためにパスワードを正常に入力するか、再度ログインした後にのみ、ページを操作し続けることができます。ページが更新された場合、ロックされたままにする必要があります。下の写真の通りです。もちろん、ユーザーはロック画面を手動で起動することもできます。目的は、他人がシステムの重要なコンテンツに恣意的にアクセスするのを防ぐことです。では、これをどうやって達成するのでしょうか?

5s ロック画面効果は次のとおりです。

2. アイデア

  1. まず、ページがロックされているかどうかを示す変数 isLock が必要です。複数のページでこのデータを共有する必要があり、更新後も取得できるため、localStorage を使用してローカルに保存します。 isLock が true の場合、ロック画面スタイルが表示されます。
  2. タイマーのsetTimeoutを設定します。たとえば、コードで、n秒間操作がないと画面がロックされるようにページを設定した場合、n秒後にロック画面操作lockPro()を実行します。つまり、var timer = setTimeout(lockPro, n)
  3. ウィンドウのmousemoveイベントを監視し、ユーザーのマウスの動きを監視し、画面がロックされているかどうかを判断する必要があります。ロックされている場合は何もしません。画面がロックされていない場合は、各マウスの動きの時間を記録する変数moveTimeを設定し、localStorageに保存し、タイマーをクリアしてタイマーをリセットします。
  4. setInterval は isLock をポーリングしてリッスンし、1 秒ごとに取得して、ロック画面の状態を時間内に取得します。
  5. ロック画面操作 lockPro は、現在の時刻と最後のマウス操作の時刻 (moveTime) の差を判定します。n 秒未満の場合、画面をロックする必要がないと判断されます。n 秒以上の場合、画面をロックする必要があり、ロック画面のステータス isLock が更新されます。
  6. 状態がロックされていると判断した後、タイマーをクリアしてタイミング タスクを終了します。
  7. 状態がロック解除されたと判断した後、タイマーをリセットします。つまり、まずタイマーをクリアしてからタイマーを設定します。
  8. ログアウトすると、ローカル キャッシュ isLock がクリアされます。
  9. パスワードがロック解除されたら、ローカル キャッシュ isLock をクリアし、moveTime をリセットし、タイマーをリセットします。

少し混乱しているので、整理する必要があります。

3. コードの実装

以下のコードは不完全であり、HTML 構造は省略されており、自由に使用できます。

// アプリ.vue

データ () {
  戻る {
    タイムアウト: 5000、
    タイマー: null、
    isLock: 'false'
  }
},
マウントされた(){
  this.timer = setTimeout(this.lockPro、this.timeOut)
  // 初回の操作時間を設定する localStorage.setItem('moveTime', Date.now())
  //最初の判定ステータス this.modalStatus()
  // ポーリング監視ステータス setInterval(this.modalStatus, 1000)
  // マウスイベントをリッスンする this.events()
},
方法:{
   イベント() {
      ウィンドウ.onmousemove = () => {
        // console.log('マウスが移動しました')
        ロックされている場合
          localStorage.setItem('moveTime', Date.now())
          this.clearLocaPro('続行')
        }
      }
    },
    モーダルステータス() {
      localStorage.getItem('isLock') が 'true' の場合 {
        // console.log('画面がロックされています')
        this.isLock = true
        this.clearLocaPro()
      } それ以外 {
        // console.log('現在画面はロックされていません')
        this.isLock = false
        this.clearLocaPro('続行')
      }
    },
    ロックプロ() {
      もし (!this.timeOut) {
        localStorage.setItem('isLock', 'false')
        this.clearLocaPro('続行')
        戻る
      }
      Date.now() - localStorage.getItem('moveTime') < this.timeOut) の場合 {
        localStorage.setItem('isLock', 'false')
        this.clearLocaPro('続行')
      } それ以外 {
        localStorage.setItem('isLock', 'true')
        this.clearLocaPro()
      }
    },
    clearLocaPro(ステータス) {
      if(this.timer){
         タイムアウトをクリアします(this.timer)
      }
      if (ステータス === '続行') {
        this.timer = setTimeout(this.lockPro、this.timeOut)
      }
    },
    // 手動ロック handleLock(){
      this.clearLocaPro()
      localStorage.setItem('isLock', 'true')
    },
    // パスワードロック解除 unlock(){
      localStorage.removeItem('isLock')
      localStorage.setItem('moveTime', Date.now())
      this.clearLocaPro('続行')
    },
    ...
    // ログアウト時にisLockをクリアすることを忘れないでください
}

js を使用した自動画面ロックの実装方法についてはこれで終わりです。js を使用した自動画面ロックの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JS を使用してポップアップ レイヤーを追加し、ロック画面操作を完了する例
  • JavaScript に基づく全画面透明マスク div レイヤー ロック画面効果の実装
  • シンプルなロック画面機能を実現する js の例
  • jsロック画面ソリューションは$.ajaxをカプセル化することで実現されます
  • jsはポップアップレイヤーを書き込み、画面効果をロックしてコードを実現します

<<:  1 つ以上のフィールドに基づいて重複データを検索する MySQL SQL ステートメント

>>:  Linux で Golang をインストールする方法

推薦する

MySQL セキュリティ管理の詳細

目次1. 順番に紹介する2. ユーザーを作成する3. ユーザーアカウントを削除する4. アクセス権5...

Linux での Nginx 監視の問題

nginxのインストール仮想マシンがインターネットにアクセスできることを確認します。 1. ルートユ...

ユーザーがフォームを繰り返し送信するのを防ぐ方法の概要

重複したフォーム送信は、マルチユーザー Web アプリケーションで最も一般的で厄介な問題です。重複送...

MySQLデータベースを誤って削除した後にデータを回復するための手順

日々の運用・保守作業において、MySQL データベースのバックアップは重要です。ウェブサイトにとって...

Linux で大容量メモリ ページを持つ Oracle データベースを最適化する方法

序文PC サーバーは今日まで発展を続け、パフォーマンスにおいて大きな進歩を遂げてきました。 64ビッ...

Docker nginx + https サブドメイン設定の詳細なチュートリアル

今日はたまたま友人のサーバーの移転を手伝うことになり、サーバーの基本的な設備の設定を行ったのですが、...

CentOS 8 インストール図 (超詳細なチュートリアル)

CentOS 8 が正式にリリースされました! CentOS は Red Hat の再配布ポリシー...

mysql 5.6.21 のインストールと設定の詳細な手順

1. 概要MySQL バージョン: 5.6.21ダウンロードアドレス: https://dev.my...

Linux SSHポートを転送する3つの方法

ssh は私が最も頻繁に使用する 2 つのコマンドライン ツールのうちの 1 つです (もう 1 つ...

レスポンシブレイアウトについて知っておくべきこと

1. はじめにレスポンシブ Web デザインにより、Web サイトは複数のデバイスと複数の画面に同時...

任意の長さの配列を作成または埋めるための JS のヒントの要約

目次序文直接充填方式for ループの push() メソッド配列コンストラクタメソッド配列コンストラ...

ハイパーリンクの幅と高さを直接設定できない問題の解決策

幅と高さを直接使用することはできません。 display:block; または display:in...

実稼働環境でのNginx高可用性ソリューションの実装プロセスの分析

準備: 192.168.16.128 192.168.16.129 2 台の仮想マシン。 Nginx...

モバイルレイアウト用の動的REMの実装

ダイナミックレム1. まず、現在の長さの単位を紹介しましょうpx em Mの幅 / 漢字の幅 1em...

Linux C++ マルチスレッド同期の非常に詳細な説明

目次1. ミューテックス1. ミューテックスの初期化2. ミューテックスロックの関連特性と分類3. ...