Vueはブラウザを閉じてログアウトする機能を実装しています（閉じると更新を区別します）

Vueはブラウザを閉じてログアウトする機能を実装しています（閉じると更新を区別します）

プロジェクトの背景：ブラウザを閉じた後、キャッシュをクリアし、再度アクセスし、再度ログインする必要があります。

解決：

data() {
    
    
    return {
    
    
      gap_time: 0,
      beforeUnload_time: 0,
    };
  },
  methods: {
    
    
    // 关闭窗口之前执行
    beforeunloadHandler() {
    
    
      this.beforeUnload_time = new Date().getTime();
    },
    unloadHandler() {
    
    
      this.gap_time = new Date().getTime() - this.beforeUnload_time;
      //判断是窗口关闭还是刷新 毫秒数判断 网上大部分写的是5
      if (this.gap_time <= 10) {
    
    
        localStorage.clear();
        //logOut() // 退出登录接口 这里应当换为个人的登出方法
      } else {
    
    
        
      }
    },
  },
  destroyed() {
    
    
    // 移除监听
    window.removeEventListener("beforeunload", () => this.beforeunloadHandler());
    window.removeEventListener("unload", () => this.unloadHandler());
  },
  mounted() {
    
    
    // 监听浏览器关闭
    window.addEventListener("beforeunload", () => this.beforeunloadHandler());
    window.addEventListener("unload", () => this.unloadHandler());
  }

sessionStorage，localStorage説明:
(1) sessionStorage(一時保存): データごとに保存領域を確保し、ブラウザを開くと作成され、ブラウザを閉じると消滅します。
(2) localStorage(長期保存): 前者と同じですが、ブラウザを閉じた後もデータが存在する点が異なります。