Vue close browser logout implementation example

1. beforeunload event
2. Unload event
3. Source code

Project needs: I also found a lot of similar articles on the Internet, but there are some problems in using them. After all, it has to suit your own needs. I am using vue3 here, but in theory vue2 can also be used. The method I wrote is universal.

These methods are all executed based on beforeunload and unload events.
Below I searched the rookie tutorial and MDN for the introduction of the two events, you can figure it out on your own.

1. beforeunload event

1.1、Novice tutorial:

insert image description here

1.2、MDN

insert image description here

2. Unload event

2.1、Novice Tutorial

insert image description here

2.2、MDN

insert image description here
MDN: Generally speaking, we recommend using window.addEventListener() to listen for the unload (en-US) event, rather than assigning a value to onunload directly.

The source code I used is posted below;

3. Source code

3.1. Method 1: Can be written in HTML page (direct use)

      var _beforeUnload_time = 0, _gap_time = 0;
      window.onunload = function (){
          _gap_time = new Date().getTime() - _beforeUnload_time;
          if(_gap_time <= 10) {//Browser close window.mgr.signoutRedirect();//This mgr is the logout method I exposed in window}else{//Browser refresh - chrome refresh console.log(document.domain);
              return confirm("Are you sure you want to leave this system?");
          }
      };
      window.onbeforeunload = function (){
          _beforeUnload_time = new Date().getTime();
      };

3.2. Method 2: Can be written in components such as app.vue (listening events)

  data() {
    return {
      gap_time: 0,
      beforeUnload_time: 0,
    };
  },
  methods: {
    //Execute before closing the window beforeunloadHandler() {
      this.beforeUnload_time = new Date().getTime();
    },
    unloadHandler() {
      this.gap_time = new Date().getTime() - this.beforeUnload_time;
      //Judge whether the window is closed or refreshed in milliseconds. Most of the online readings are 5
      if (this.gap_time <= 10) {
        mgr.signoutRedirect(); // Logout interface should be replaced with personal logout method} else {
        console.log(document.domain);
        return confirm("Are you sure you want to leave this system?");
      }
    },
  },
  unmounted() {//vue can be replaced with destroyed() life cycle, but this can also be used // Remove the listener window.removeEventListener("beforeunload", () => this.beforeunloadHandler());
    window.removeEventListener("unload", () => this.unloadHandler());
  },
  mounted() {
    // Listen for browser closing window.addEventListener("beforeunload", () => this.beforeunloadHandler());
    window.addEventListener("unload", () => this.unloadHandler());
  },

Reference articles:
When vue closes the browser, an event is triggered and the logout interface is executed. vue closes the browser and clears the token (distinguishing between refreshes)

This is the end of this article about the implementation of closing the browser and logging out in vue. For more relevant vue closing the browser and logging out content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: