vue关闭浏览器退出登录怎么实现

本篇内容介绍了"vue关闭浏览器退出登录怎么实现"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

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关闭浏览器退出登录怎么实现"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！