Zwei Möglichkeiten, Vue-Benutzer dazu zu bringen, sich über einen längeren Zeitraum ohne Bedienung von der Anmeldeseite abzumelden

//html
<el-button type="primary" @click="loginIn">Klicken Sie hier, um sich anzumelden</el-button>

// js
Methoden: {
    loginIn() {
      //Zeit des ersten Klicks speichern sessionStorage.setItem("lastClickTime", new Date().getTime());
      //Simulieren Sie das Backend, um ein Token zurückzugeben
      sessionStorage.setItem('Token',"Token")
      dies.$router.push({
        Weg: "/",
      });
    },
}

<Vorlage>
  <div Klasse="HomeBox">
    <!-- Links ist die Menüebene-->
    <div Klasse="links">
      <div Klasse="leftNav">
        <el-Menü
          :default-active="AktivIndex"
          Klasse="elMenu"
          Hintergrundfarbe = "#333"
          Textfarbe = "#B0B0B2"
          Aktiver Text-Color="#fff"
          :unique-opened="wahr"
          Router
          ref="elMenü"
        >
          <el-menu-item index="/vue">
            <i class="el-icon-location-outline"></i>
            <span slot="title">Seite ansehen</span>
          </el-Menüelement>
          <el-menu-item index="/reagieren">
            <i Klasse="el-icon-star-off"></i>
            <span slot="title">React-Seite</span>
          </el-Menüelement>
          <el-menu-item index="/angular">
            <i class="el-icon-pear"></i>
            <span slot="title">Angular-Seite</span>
          </el-Menüelement>
        </el-Menü>
      </div>
    </div>
    <!-- Rechts ist die Ansichtshierarchie-->
    <div Klasse="rechts">
      <div Klasse="rechtsOben">
        <el-button type="primary" plain @click="loginOut">Abmelden</el-button>
      </div>
      <div Klasse="rightBottom">
        <Router-Ansicht></Router-Ansicht>
      </div>
    </div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "Home",
  Daten() {
    zurückkehren {
      ActiveIndex: this.$route.path,
      Timer: null,
    };
  },
  erstellt() {
    /* 
      Erster Schritt:
        Wenn die Komponente initialisiert und geladen ist, muss sie auf Klickereignisse warten. Hinweis: Der dritte Parameter von addEventListener sollte hier hinzugefügt werden.
        Da der dritte Parameter bestimmt, ob es sich um ein Sprudeln oder ein Erfassen handelt (false ist die Standardeinstellung für das Sprudeln, true für das Erfassen), erfassen wir Klickereignisse an der Position der obersten DOM-Ebene, da wir eine Bindung zum Abhören von Klickereignissen herstellen. Daher sollte der dritte Parameter true hinzugefügt werden, damit wir überall in der inneren Ebene auf Klickereignisse hören und dann die Klickzeit speichern können*/
    Fenster.addEventListener(
      "klicken",
      () => {
        // Der Einfachheit halber speichern wir die Zeit des Klickereignisses direkt im SessionStorage, sodass sie leicht abgerufen und verglichen werden kann. sessionStorage.setItem("lastClickTime", new Date().getTime());
      },
      WAHR
    );
  },
  montiert() {
    /*
      Schritt 2:
        Wenn die Komponente initialisiert und geladen wird, muss ein Timer gebunden werden, um die Differenz zwischen der aktuellen Zeit und der letzten Klickzeit durch die regelmäßige Abfrage des Timers zu vergleichen*/
    dies.istTimeOut();
  },
  Methoden: {
    istTimeOut() {
      // Bevor Sie den Timer verwenden, löschen Sie den Timer. clearInterval(this.timer);
      dieser.timer = setzeInterval(() => {
        let lastClickTime = sessionStorage.getItem("lastClickTime") * 1; // Wandelt die String-Zeit des letzten Klicks in eine digitale Zeit um let nowTime = new Date().getTime(); // Ruft die aktuelle Zeit ab console.log("Aktuelle Zeit und vorherige Klickzeit", nowTime, lastClickTime);
        // Angenommen, unsere Anforderung lautet: Wenn 5 Sekunden lang kein Klick ausgeführt wird, wird eine Aufforderung zum An- und Abmelden angezeigt, wenn (nowTime - lastClickTime > 1000 * 5) {
          // Fordern Sie den Benutzer dazu auf. $message({ Typ: "Warnung", Nachricht: "Zeitüberschreitung, abgemeldet" });
          // Hier müssen wir den Timer löschen und die Aufgabe beenden clearInterval(this.timer);
          //Kehren Sie abschließend zur Anmeldeseite zurück. this.$router.push({ path: "/login" });
        }
      }, 1000);
    },
  },
  vorZerstören() {
    // Der letzte Schritt besteht darin, den Timer zu löschen und die Bindung des Klickereignisses clearInterval(this.timer) beim Verlassen der Seite aufzuheben.
    window.removeEventListener("klicken", () => {}, true);
  },
};
</Skript>

// Auf dem Fensterobjekt montiert window.vm = new Vue({
    speichern,
    Router,
    rendern: h => h(App),
}).$mount('#app')

http.interceptors.response.use((res) => {
    console.log('Global registrieren',vm);
    var code = res.data.code;
    if(code == 4567){ // 4567 ist der Timeout-Statuscode. Wenn wir dieses Zeichen sehen, werden wir den Benutzer auffordern, sich abzumelden. // Beachten Sie, dass der Routensprung zu diesem Zeitpunkt nicht this.$router.push() ist. vm._router.push({ path: "/login" });
    }
    Rückgabewert.Daten
}, (Fehler) => {
    // console.log(Fehler)
    returniere Promise.reject(Fehler);
})