Vueユーザーが長時間操作せずにログインページからログアウトするように実装する2つの方法

//html
<el-button type="primary" @click="loginIn">クリックしてログイン</el-button>

// js
メソッド: {
    ログイン() {
      // 最初のクリックの時間を保存します sessionStorage.setItem("lastClickTime", new Date().getTime());
      //バックエンドをシミュレートしてトークンを返す
      sessionStorage.setItem('トークン'、"トークン")
      this.$router.push({
        パス： "/"、
      });
    },
}

<テンプレート>
  <div class="homeBox">
    <!-- 左側はメニュー レベルです -->
    <div class="left">
      <div class="leftNav">
        <el-メニュー
          :default-active="アクティブインデックス"
          クラス="elMenu"
          背景色="#333"
          テキストカラー="#B0B0B2"
          アクティブテキストカラー="#fff"
          :unique-opened="true"
          ルーター
          ref="elメニュー"
        >
          <el-menu-item index="/vue">
            <i class="el-icon-location-outline"></i>
            <span slot="title">vue ページ</span>
          </el-menu-item>
          <el-menu-item index="/react">
            <i class="el-icon-star-off"></i>
            <span slot="title">React ページ</span>
          </el-menu-item>
          <el-menu-item index="/angular">
            <i class="el-icon-pear"></i>
            <span slot="title">角度ページ</span>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <!-- 右側はビュー階層です -->
    <div class="right">
      <div class="rightTop">
        <el-button type="primary" plain @click="loginOut">ログアウト</el-button>
      </div>
      <div class="rightBottom">
        <ルータービュー></ルータービュー>
      </div>
    </div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: "ホーム",
  データ（） {
    戻る {
      アクティブインデックス: this.$route.path,
      タイマー: null、
    };
  },
  作成された() {
    /* 
      最初のステップ:
        コンポーネントが初期化され、ロードされると、クリック イベントをリッスンするようにバインドされます。注: addEventListener の 3 番目のパラメータをここで追加する必要があります。
        3 番目のパラメータは、バブリングかキャプチャリングかを決定します (バブリングの場合は false、キャプチャリングの場合は true がデフォルト)。クリック イベントをリッスンするようにバインドしているため、トップレベルの DOM 位置でクリック イベントをキャプチャします。そのため、3 番目のパラメータ true を追加して、内部レイヤーの任意の場所でクリック イベントをリッスンし、クリック時間を保存できるようにする必要があります。*/
    ウィンドウにイベントリスナーを追加します(
      "クリック"、
      () => {
        // 便宜上、クリック イベントの時刻を sessionStorage に直接保存し、簡単に取得して比較できるようにします。sessionStorage.setItem("lastClickTime", new Date().getTime());
      },
      真実
    );
  },
  マウント() {
    /*
      ステップ2:
        コンポーネントが初期化されロードされると、タイマーをバインドして、タイマーの定期的なポーリングを通じて現在の時刻と最後のクリック時刻の差を比較する必要があります*/
    これはタイムアウトです。
  },
  メソッド: {
    タイムアウト() {
      // タイマーを使用する前に、タイマーをクリアします。clearInterval(this.timer);
      this.timer = setInterval(() => {
        let lastClickTime = sessionStorage.getItem("lastClickTime") * 1; // 最後のクリックの文字列時間をデジタル時間に変換します。let nowTime = new Date().getTime(); // 現在の時刻を取得します。console.log("現在の時刻と前回のクリック時刻", nowTime, lastClickTime);
        // 要件は次の通りとします: 5秒間クリックが行われなかった場合、ログインとログアウトのプロンプトが表示されます if (nowTime - lastClickTime > 1000 * 5) {
          // ユーザーにこれを表示します。$message({ type: "warning", message: "タイムアウト、ログアウトしました" });
          // ここでタイマーをクリアしてタスクを終了する必要があります clearInterval(this.timer);
          //最後にログインページに戻ります this.$router.push({ path: "/login" });
        }
      }, 1000);
    },
  },
  破棄する前に() {
    // 最後のステップは、タイマーをクリアし、ページを離れるときにクリック イベント clearInterval(this.timer) をバインド解除することです。
    window.removeEventListener("click", () => {}, true);
  },
};
</スクリプト>

// ウィンドウオブジェクトにマウント window.vm = new Vue({
    店、
    ルーター、
    レンダリング: h => h(App),
}).$mount('#app')

http.interceptors.response.use((res) => {
    console.log('グローバルに登録',vm);
    var コード = res.data.code;
    if(code == 4567){ // 4567 はタイムアウト ステータス コードです。この記号が表示されたら、ユーザーにログアウトを求めます。 // この時点でルート ジャンプは this.$router.push() ではないことに注意してください。 vm._router.push({ path: "/login" });
    }
    res.dataを返す
}, (エラー) => {
    // コンソール.log(エラー)
    Promise.reject(error) を返します。
})