iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue关闭浏览器退出登录的实现示例
  • 342
分享到

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

2024-04-02 19:04:59 342人浏览 独家记忆
摘要

目录1、beforeunload事件2、unload事件3、源码部分  项目需要:也在网上找了不少类似的文章,不过用起来多少有点问题,毕竟要适合自己的需求,我这里是vue3适用,理论

  项目需要:也在网上找了不少类似的文章,不过用起来多少有点问题,毕竟要适合自己的需求,我这里是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关闭浏览器退出登录内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue关闭浏览器退出登录的实现示例

本文链接: https://www.lsjlt.com/news/159106.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue关闭浏览器退出登录的实现示例
    目录1、beforeunload事件2、unload事件3、源码部分  项目需要:也在网上找了不少类似的文章,不过用起来多少有点问题,毕竟要适合自己的需求,我这里是vue3适用,理论...
    99+
    2024-04-02
  • vue关闭浏览器退出登录怎么实现
    本篇内容介绍了“vue关闭浏览器退出登录怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1、beforeunload事件1、菜鸟教程:...
    99+
    2023-06-21
  • js关闭浏览器时退出账号的处理
    目录经典做法 问题 进一步问题 需要注意问题 经典做法 众所周知,为了账户安全,用户未主动点击注销系统时,直接关闭浏览器或标签页强制退出系统的方法: // 关闭时调用注销接口 ...
    99+
    2024-04-02
  • jquery怎么实现关闭浏览器弹出提示功能
    在编写 web 应用程序时,您会发现需要创建浏览器按下关闭按钮时提示用户是否确定离开页面,以避免意外关闭应用程序并失去用户数据。在本文中,我们将介绍如何使用 jQuery 实现此目标。首先,我们需要捕获窗口关闭事件。为此,我们可以使用 jQ...
    99+
    2023-05-14
  • 手机浏览器中javascript 关闭浏览器弹出提示框
    近年来,随着手机智能化程度的不断提高,越来越多的人开始使用手机浏览器来进行网页浏览和操作。作为一名开发人员,如何在手机浏览器中实现一些常见的功能也变得尤为重要。本文将介绍如何利用javascript技术,在手机浏览器中关闭浏览器弹出的提示框...
    99+
    2023-05-14
  • spring-security关闭登录框的实现示例
    事情要从同事的一个项目说起,项目中需要集成公司的单点登录系统,但是无论如何都无法跳转到正常的登录页面。相反,却始终跳转到另外一个登录页面。 但是代码却非常简单,简化一下 @Co...
    99+
    2024-04-02
  • js关闭浏览器时退出账号怎么处理
    这篇文章主要讲解了“js关闭浏览器时退出账号怎么处理”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“js关闭浏览器时退出账号怎么处理”吧!经典做法众所周知,为了账户安全,用户未主动点击注销系统...
    99+
    2023-06-21
  • SpringSecurity实现退出登录和退出处理器
    在系统中一般都有退出登录的操作。退出登录后,Spring Security进行了以下操作: 清除认证状态销毁HttpSession对象跳转到登录页面 配置退出登录的路径和退出后跳转的...
    99+
    2024-04-02
  • JS监控关闭浏览器操作的示例分析
    这篇文章给大家分享的是有关JS监控关闭浏览器操作的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。JS监控关闭浏览器操作的实例详解需求如下: 用户关闭浏览器通知后台。 方案...
    99+
    2024-04-02
  • spring mvc实现登录账号单浏览器登录
    在很多web产品中都需要实现在同一时刻,只能允许一个账号同时只能在一个浏览器当中登录。通俗点讲就是当A账号在浏览器1当中登录了,此时在浏览器2中登录A账号。那么在浏览器1中的A账号将会被挤出去,当用户操作浏览器1的页面,页面会跳到登录页面,...
    99+
    2023-05-31
    spring mvc 登录
  • vue实现浏览器桌面通知的示例代码
    目录方案一: H5 JavaScript Web Notification API方案二: push.js 工具 (基于notification)一、引入二、主要代码方案三: iNo...
    99+
    2023-01-08
    vue 浏览器桌面通知 vue 桌面通知
  • php浏览器关闭前一直在登录界面如何解决
    今天小编给大家分享一下php浏览器关闭前一直在登录界面如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。在一般的登录系统...
    99+
    2023-07-05
  • Spring Security怎么实现退出登录和退出处理器
    这篇文章主要介绍“Spring Security怎么实现退出登录和退出处理器”,在日常操作中,相信很多人在Spring Security怎么实现退出登录和退出处理器问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作...
    99+
    2023-06-30
  • php实现关闭浏览器继续执行的方法
    这篇文章给大家分享的是有关php实现关闭浏览器继续执行的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。php实现关闭浏览器继续执行的方法:首先打开相应的PHP代码文件;然后通过“set_time_limit(...
    99+
    2023-06-14
  • php怎么实现关闭浏览器继续执行
    在PHP中,一旦执行完成,就会将输出发送给浏览器,并且关闭与浏览器的连接。所以,不能直接实现关闭浏览器后继续执行PHP代码。 然而,...
    99+
    2023-10-27
    php
  • 浏览器关闭多个选项时没弹出提示怎么办
    这篇文章将为大家详细讲解有关浏览器关闭多个选项时没弹出提示怎么办,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 1.首先登录到电脑桌面,点击打开浏览器,在打开的浏览器窗口中点击“工具”,然后打开...
    99+
    2023-06-28
  • django+vue实现注册登录的示例代码
    注册 前台利用vue中的axios进行传值,将获取到的账号密码以form表单的形式发送给后台。 form表单的作用就是采集数据,也就是在前台页面中获取用户输入的值。numberVa...
    99+
    2024-04-02
  • vue实现登录注册模板的示例代码
    模板1:  login.vue <template> <p class="login"> <el-tabs v-model="ac...
    99+
    2024-04-02
  • vue获取token实现token登录的示例代码
    使用token做登录验证的思路大致如下: 1、在第一次登录的时候前端调用后端的接口,把用户名和密码传给后端。 2、后端收到请求,验证用户名和密码,验证成功后,返回给前端一个token...
    99+
    2024-04-02
  • Vue实现Google第三方登录的示例代码
    目录一、开发者平台配置解决问题BUG一、开发者平台配置 1、进入开发者平台,首先前往Google API 控制台选择或者创建一个项目 谷歌开发者平台 一堆眼花缭乱的API让你...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作