@bytesnz

Jack Farley, Computer Engineer

So I recently ran into a little bug in an Angular/RxJS web app we are developing. If you had the app open in multiple tabs, you could log out of one tab and continue to navigate around the app on other tabs, as long as you visited pages that the data had been downloaded for (which is stored in a RxJS state).

Our app stores some information in the browsers LocalStorage that is cleared when you user is logged out. This made it nice and easy to use this value and the storage event to log out the user on all tabs when the value was cleared, and once the user logs back in (and the value is set again), take them back to where they were on all tabs. Below is a gist of Javascript to show a way of handling the storage event.

Observer.fromEvent(window, 'storage').subscribe((event) => {
  if (event.key === 'mydata') {
    if (!event.newValue) {
      window.sessionStorage.setItem('redirect', this.router.url);
      this.app.logout();
    } else if (!event.oldVale && this.app.checkLogin()) {
        const redirect = window.sessionStorage.getItem('redirect');
        if (redirect) {
          this.router.navigateByUrl(redirect);
          window.sessionStorage.removeItem('redirect');
        }
      }
    }
  }
});