Navigate to the logout page automatically when closing the final tab

Question

Navigate to the logout page automatically when closing the final tab

In order to comply with the requirement, I need to log out the user when they close the last tab on the browser.

    ngOnInit() {
        let counter: any = this.cookieService.get('screenCounterCookie');
        counter ? ++counter : (counter = '1');
        this.cookieService.set('screenCounterCookie', counter);
    }


    @HostListener('window:beforeunload', ['$event'])
    ngOnDestroy() {
        let counter: any = this.cookieService.get('screenCounterCookie');
        if (counter > 1) {
            --counter;
            this.cookieService.set('screenCounterCookie', counter);
        } else {
            this.cookieService.delete('screenCounterCookie');
            window.open(environment.cognitoLogoutURL);
        }
    }

There seems to be inconsistency in the behavior. Sometimes the counter decreases, sometimes it doesn't. Additionally, I need to address the logic for handling refresh, closing of multiple tabs, and browser closure.

What is the best way to implement this?

angular typescript logout ngondestroy

Answer 1

Answer №1

Monitoring the total number of tabs: https://jsbin.com/mipanuro/1/edit?html,js,output (Please refer to this link for more information)

Approach 1 (Utilizing a POST request):

Implementing BeaconAPI (navigator.sendBeacon()) for background processing.

Approach 2 (Applicable for GET Requests as well):

Utilizing fetch in conjunction with keep-alive

Approach 3 (Websocket Integration):

Sending periodic pings to the backend to maintain session validity. The backend can revoke the session if pings are not received.

Answer 2

Monitoring the total number of tabs: https://jsbin.com/mipanuro/1/edit?html,js,output (Please refer to this link for more information)

Approach 1 (Utilizing a POST request):

Implementing BeaconAPI (navigator.sendBeacon()) for background processing.

Approach 2 (Applicable for GET Requests as well):

Utilizing fetch in conjunction with keep-alive

Approach 3 (Websocket Integration):

Sending periodic pings to the backend to maintain session validity. The backend can revoke the session if pings are not received.

Answer 3

Answer №2

I have made some enhancements to your code without utilizing the ngOnDestroy method. Upon testing, it appears to be functioning correctly.

import { Component } from '@angular/core'

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor() {
    const counter = localStorage.getItem('screenCounterCookie') || 0

    localStorage.setItem('screenCounterCookie', (Number(counter) + 1).toString())

    window.addEventListener('beforeunload', () => {
      const counter: number = Number(localStorage.getItem('screenCounterCookie')) - 1
      localStorage.setItem('screenCounterCookie', counter.toString())

      if (counter <= 0) {
        localStorage.removeItem('screenCounterCookie')
        console.log('logout')
        // Your logout
      }
    })
  }
}

Answer 4

I have made some enhancements to your code without utilizing the ngOnDestroy method. Upon testing, it appears to be functioning correctly.

import { Component } from '@angular/core'

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor() {
    const counter = localStorage.getItem('screenCounterCookie') || 0

    localStorage.setItem('screenCounterCookie', (Number(counter) + 1).toString())

    window.addEventListener('beforeunload', () => {
      const counter: number = Number(localStorage.getItem('screenCounterCookie')) - 1
      localStorage.setItem('screenCounterCookie', counter.toString())

      if (counter <= 0) {
        localStorage.removeItem('screenCounterCookie')
        console.log('logout')
        // Your logout
      }
    })
  }
}

Answer 5

Answer №3

One effective method I have considered for achieving this is by utilizing websockets along with the keep-alive principle. Alternatively, you could perform a manual periodic check with the server to refresh a timer that would automatically log out the user upon expiration.

Relying on the browser to trigger an event when it closes or when the user loses power is not a reliable method across different platforms.

Answer 6

One effective method I have considered for achieving this is by utilizing websockets along with the keep-alive principle. Alternatively, you could perform a manual periodic check with the server to refresh a timer that would automatically log out the user upon expiration.

Relying on the browser to trigger an event when it closes or when the user loses power is not a reliable method across different platforms.

Navigate to the logout page automatically when closing the final tab

Answer №1

Answer №2

Answer №3

Similar questions

Cordova Emulate Android cannot locate Gradle or an installed Android Studio, despite their presence

What could be causing the increased build size of my Polymer2 compared to Angular5?

The step-by-step guide to fixing a Gigwage client eslint error using nestJS

The error message "SyntaxError: Cannot use import statement outside a module" popped up while working with discord.js, typescript, heroku

Selecting logic depending on the request body in NestJS

The highcharts-angular version of the stock-tools-gui demo is lacking a graphical user interface (GUI)

How can I incorporate piping into an input field when working with Angular 2?

Exploring the Secrets of JSON Parsing in Angular

The request for PUT, POST, and DELETE methods has been terminated

Encountering the error message "Unable to access properties of null (specifically 'useState')" while trying to utilize a component from my custom library

What is the best way to establish a restriction on the number of items obtained from an RSS

Utilizing Vue class-style components for creating a recursive component

Getting the route parameter in Angular 2 is easy with the stable router

What steps can I take to achieve complete code coverage in my unit testing for this component and also ensure that the 'else' part is being

Angular does not automatically send cookies to the server

Issues arising with utilizing Github for hosting Angular applications

The functionality of "subscribe()" is outdated if utilized with "of(false)"

Are optional parameters in TypeScript distinct from parameters that have the ability to be undefined?

A critical error has occurred: RangeError - The maximum call stack size has been exceeded while trying to

Validate object containing both static and dynamic keys