vue关闭浏览器退出登录的实现示例

 更新时间:2021年12月03日 15:00:38   作者:星灭233  
本文主要介绍了vue关闭浏览器退出登录,一般都是根据根据beforeunload和unload这两个事件执行的。本文就详细的介绍一下如何实现,感兴趣的可以了解一下

  项目需要:也在网上找了不少类似的文章,不过用起来多少有点问题,毕竟要适合自己的需求,我这里是vue3适用,理论上vue2也可以使用,我写的方法是通用的。

  这些方法无非都是根据beforeunloadunload这两个事件执行的。
  下面我搜了下菜鸟教程和MDN对两个事件的介绍,可自行琢磨。

1、beforeunload事件

1.1、菜鸟教程:

在这里插入图片描述

1.2、MDN

在这里插入图片描述

2、unload事件

2.1、菜鸟教程

在这里插入图片描述

2.2、MDN

在这里插入图片描述
  MDN:通常而言,我们推荐使用 window.addEventListener() 来监听 unload (en-US) 事件,而不是直接给 onunload 赋值。

下面贴我使用的源码;

3、源码部分

3.1、方法一:可写于html页面使用(直接使用)

      var _beforeUnload_time = 0, _gap_time = 0;
      window.onunload = function (){
          _gap_time = new Date().getTime() - _beforeUnload_time;
          if(_gap_time <= 10) {//浏览器关闭
              window.mgr.signoutRedirect();//这个mgr是我暴露在window的退出登录方法
          }else{//浏览器刷新-chrome刷新
              console.log(document.domain);
              return confirm("确定要离开本系统么?");
          }
      };
      window.onbeforeunload = function (){
          _beforeUnload_time = new Date().getTime();
      };

3.2、方法二:可写于组件如app.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) {
        mgr.signoutRedirect(); // 退出登录接口 这里应当换为个人的登出方法
      } else {
        console.log(document.domain);
        return confirm("确定要离开本系统么?");
      }
    },
  },
  unmounted() {//vue可换为destroyed()生命周期,不过这个也可以用
    // 移除监听
    window.removeEventListener("beforeunload", () => this.beforeunloadHandler());
    window.removeEventListener("unload", () => this.unloadHandler());
  },
  mounted() {
    // 监听浏览器关闭
    window.addEventListener("beforeunload", () => this.beforeunloadHandler());
    window.addEventListener("unload", () => this.unloadHandler());
  },

参考文章:
  vue关闭浏览器时,触发事件,执行退出登录接口
  vue 关闭浏览器清空token (区分刷新)

到此这篇关于vue关闭浏览器退出登录的实现的文章就介绍到这了,更多相关vue关闭浏览器退出登录内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue样式穿透 ::v-deep的具体使用

    vue样式穿透 ::v-deep的具体使用

    这篇文章主要介绍了vue样式穿透 ::v-deep的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue draggable resizable gorkys与v-chart使用与总结

    vue draggable resizable gorkys与v-chart使用与总结

    这篇文章主要介绍了vue draggable resizable gorkys与v-chart使用与总结,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • Vue.js rules校验规则举例详解

    Vue.js rules校验规则举例详解

    Vue表单校验规则(rules)是一种用于验证表单数据的对象,它通常用于Vue.js框架中的表单组件中,可以在表单提交前进行数据验证,这篇文章主要给大家介绍了关于Vue.js rules校验规则的相关资料,需要的朋友可以参考下
    2024-02-02
  • vue iview 隐藏Table组件里的某一列操作

    vue iview 隐藏Table组件里的某一列操作

    这篇文章主要介绍了vue iview 隐藏Table组件里的某一列操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 基于element-ui封装可搜索的懒加载tree组件的实现

    基于element-ui封装可搜索的懒加载tree组件的实现

    这篇文章主要介绍了基于element-ui封装可搜索的懒加载tree组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • Vue中@keyup.enter @v-model.trim的用法小结

    Vue中@keyup.enter @v-model.trim的用法小结

    这篇文章主要介绍了Vue中@keyup.enter @v-model.trim的用法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-12-12
  • 解决VUE的对话框el-dialog点击外部消失问题

    解决VUE的对话框el-dialog点击外部消失问题

    这篇文章主要介绍了解决VUE的对话框el-dialog点击外部消失问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue/cli3.0脚手架部署到nginx时页面空白的问题及解决

    vue/cli3.0脚手架部署到nginx时页面空白的问题及解决

    这篇文章主要介绍了vue/cli3.0脚手架部署到nginx时页面空白的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue实现滚动底部加载下一页指令的示例代码

    vue实现滚动底部加载下一页指令的示例代码

    vue中监控滚动事件可以直接在mounted中绑定滚动事件,然后在销毁前解绑滚动事件,本文通过实例代码介绍vue实现滚动底部加载下一页指令的过程,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • Vue中通过minio上传文件的详细步骤

    Vue中通过minio上传文件的详细步骤

    最近项目中使用了minio作为静态资源管理服务,所以简单写一下如何通过minio来上传图片,下面这篇文章主要给大家介绍了关于Vue中通过minio上传文件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07

最新评论