js zur Realisierung der automatischen Sperrbildschirmfunktion

1. Anwendungsszenarien

Es gibt eine solche Anforderung, daher wurde ein System entwickelt. Wenn der Benutzer den Desktop verlässt oder für einen bestimmten Zeitraum nicht arbeitet, müssen alle geöffneten Seiten des Systems gesperrt werden, genau wie der Sperrbildschirm des Desktops. Erst nach erfolgreicher Eingabe des Passworts zur Überprüfung oder erneuter Anmeldung kann die Seite weiter bedient werden. Wenn die Seite aktualisiert wird, muss sie gesperrt bleiben. Genau wie auf dem Bild unten. Natürlich können Nutzer den Sperrbildschirm auch manuell auslösen. Ziel ist es, den willkürlichen Zugriff Dritter auf wichtige Inhalte des Systems zu verhindern. Wie also erreichen wir das?

Der Effekt des 5s-Sperrbildschirms ist wie folgt:

2. Ideen

1. Zunächst wird eine Variable isLock benötigt, um anzugeben, ob die Seite gesperrt ist. Da mehrere Seiten diese Daten gemeinsam nutzen müssen und auch nach der Aktualisierung noch darauf zugreifen können, verwende ich localStorage, um sie lokal zu speichern. Wenn isLock true ist, wird der Sperrbildschirmstil angezeigt.
2. Stellen Sie einen Timer setTimeout ein. Wenn der Code beispielsweise die Seite so einstellt, dass der Bildschirm nach n Sekunden Inaktivität gesperrt wird, führen Sie nach n Sekunden den Sperrbildschirmvorgang lockPro() aus, d. h. var timer = setTimeout(lockPro, n)
3. Es ist notwendig, das Mousemove-Ereignis des Fensters zu überwachen, die Mausbewegung des Benutzers zu überwachen und festzustellen, ob der Bildschirm gesperrt ist. Wenn er gesperrt ist, tun Sie nichts. Wenn der Bildschirm nicht gesperrt ist, legen Sie eine Variable moveTime fest, um die Zeit jeder Mausbewegung aufzuzeichnen, sie im localStorage zu speichern, den Timer zu löschen und den Timer zurückzusetzen.
4. setInterval führt eine Abfrage durch und hört auf isLock, wobei es alle 1 Sekunde den Status des Sperrbildschirms abruft, um ihn rechtzeitig zu erfahren.
5. Die Sperrbildschirmoperation lockPro ermittelt die Differenz zwischen der aktuellen Zeit und der Zeit der letzten Mausoperation, also moveTime. Wenn sie kleiner als n Sekunden ist, wird davon ausgegangen, dass der Bildschirm nicht gesperrt werden muss. Wenn sie größer oder gleich n Sekunden ist, muss der Bildschirm gesperrt werden und der Sperrbildschirmstatus isLock wird aktualisiert.
6. Nachdem Sie festgestellt haben, dass der Status gesperrt ist, löschen Sie den Timer und beenden Sie die Zeitmessaufgabe.
7. Nachdem Sie festgestellt haben, dass der Status entsperrt ist, setzen Sie den Timer zurück, d. h. löschen Sie zuerst den Timer und stellen Sie dann einen Timer ein
8. Wenn Sie sich abmelden, löschen Sie den lokalen Cache isLock.
9. Wenn das Kennwort entsperrt ist, löschen Sie den lokalen Cache isLock, setzen Sie moveTime zurück und setzen Sie den Timer zurück.

Es ist etwas verwirrend und muss geklärt werden.

3. Code-Implementierung

Der folgende Code ist unvollständig, die HTML-Struktur fehlt und Sie können ihn frei verwenden.

// app.vue

Daten () {
  zurückkehren {
    Zeitüberschreitung: 5000,
    Timer: null,
    isLock: 'false'
  }
},
montiert () {
  dieser.timer = setzeTimeout(dieses.lockPro, dieses.timeOut)
  // Stellen Sie die Vorgangszeit zum ersten Mal ein localStorage.setItem('moveTime', Date.now())
  //Erster Beurteilungsstatus this.modalStatus()
  // Poll-Überwachungsstatus setInterval(this.modalStatus, 1000)
  // Auf Mausereignisse warten this.events()
},
Methoden:{
   Ereignisse() {
      fenster.onmousemove = () => {
        // console.log('Die Maus hat sich bewegt')
        wenn (!this.isLock) {
          localStorage.setItem('Verschiebezeit', Date.now())
          this.clearLocaPro('weiter')
        }
      }
    },
    modalStatus() {
      wenn (localStorage.getItem('isLock') === 'true') {
        // console.log('Bildschirm gesperrt')
        this.isLock = true
        dies.clearLocaPro()
      } anders {
        // console.log('Der Bildschirm ist derzeit nicht gesperrt')
        this.isLock = false
        this.clearLocaPro('weiter')
      }
    },
    lockPro() {
      wenn (!dieses.timeOut) {
        localStorage.setItem('istLock', 'false')
        this.clearLocaPro('weiter')
        zurückkehren
      }
      wenn (Date.now() - localStorage.getItem('moveTime') < this.timeOut) {
        localStorage.setItem('istLock', 'false')
        this.clearLocaPro('weiter')
      } anders {
        localStorage.setItem('istLock', 'wahr')
        dies.clearLocaPro()
      }
    },
    clearLocaPro(status) {
      wenn(dieser.timer){
         Zeitüberschreitung löschen(dieser.Timer)
      }
      wenn (Status === 'weiter') {
        dieser.timer = setzeTimeout(dieses.lockPro, dieses.timeOut)
      }
    },
    // Manuelle Sperre handleLock(){
      dies.clearLocaPro()
      localStorage.setItem('istLock', 'wahr')
    },
    // Passwort entsperren unlock(){
      localStorage.removeItem('isLock')
      localStorage.setItem('Verschiebezeit', Date.now())
      this.clearLocaPro('weiter')
    },
    ...
    // Vergessen Sie nicht, isLock beim Abmelden zu löschen
}

Dies ist das Ende dieses Artikels über die Implementierung einer automatischen Bildschirmsperre mit js. Weitere Informationen zur automatischen Bildschirmsperre mit js finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!