vue3+vite5+ts+组合式写法+pinia 关闭浏览器 退出登录

一注意

网上很少有这个写法，也是结合的网上各路大神的写法，改了一下，主要是实现关闭浏览器时，执行登录退出的功能，直接上代码，代码是放在APP.vue文件中的哈，小伙伴得记住了。

二、代码

<script setup lang="ts" name="App">

//以下的功能比较单一，关闭浏览器时，会自动退出用户登录

import { ref, onMounted, onUnmounted } from 'vue';

//获取用户相关的小仓库,也就是自己写的文件

import useUserStore from '@/store/modules/user';

import { useRouter, useRoute } from 'vue-router';

//使用用户仓库存储的用户信息

let userStore = useUserStore();

//获取路由 器  对象,路由跳转

let $router = useRouter();

//获取  路由  对象,当前路由对象

let $route = useRoute();

//退出登录回调（三件事情），当然这个也可以写成一个export形式，比如退出按钮也可以调用

const logout = async () => {

    //第一件事情：需要向服务器发请求[退出登录接口]，告诉服务器本次token无效了，

    //下次再登录时，token重新生成，发给前端

    //第二件事情:仓库当中关于用户相关的数据需要清空掉[token|username|avatar]

    await userStore.userLogout();//[两件事情接口都在这里]

    //第三件事情:跳转到登录页面，即路由跳转,回到登录页面，初始页面

    $router.push({

        path: '/login',

        query: { redirect: $route.path }//重新登录以后，重定向到之前退出时的登录界面，但是登录界面必须要重新配置为可以识别带query参数的跳转

    });

}

 

// 定义响应式数据

const gap_time = ref(0);

const beforeUnload_time = ref(0);

// 定义处理函数

const beforeunloadHandler = () => {

  beforeUnload_time.value = new Date().getTime();

};

const unloadHandler = () => {

  gap_time.value = new Date().getTime() - beforeUnload_time.value;

  if (gap_time.value <= 10) { 

    // 调用登出方法,这个方法中同时清除的pinia中的本地化存储的数据

    logout();

  }

};

// 在组件挂载时添加事件监听器

onMounted(() => {

  window.addEventListener('beforeunload', beforeunloadHandler);

  window.addEventListener('unload', unloadHandler);

});

// 在组件卸载时移除事件监听器

onUnmounted(() => {

  window.removeEventListener('beforeunload', beforeunloadHandler);

  window.removeEventListener('unload', unloadHandler);

});

</script>

仿照这个链接：如何利用VUE监听网页关闭并执行退出操作_vue.js_脚本之家