window.addEventListener is not working on a user click on the browser back button in polymer 2.0?

Question

window.addEventListener('popstate', function(event) {
   alert("you are not able to push back button");
 });

I have create the web application using polymer 2.0 but I have to click on the back button to the browser is logout I have to show the alert if the user is click on the back button of the browser I have tried window.addEventListener but still got error.

Answer 1

I've not been able to stop the browser's back button, but I've managed to get around it. In my app, I want to warn the user that they will log out by backing up to the first page, and give them a chance to leave or stay put. Using the polymer-2-starter-kit as my starting point, and tracking a connected property, I got this working:

_routePageChanged(page) {
  // If no page was found in the route data, page will be an empty string.
  // Default to 'home' in that case.
  this.page = (page && this.connected) ? page : 'home';

  // Close the drawer.
  this.drawerOpened = false;
}

_pageChanged(page, oldPage) {
  // Warn user if backing up logs out.
  if ((page == '' || page == 'home') && this.connected) {
    if (window.confirm("Do you really mean to logout?")) {
      this.$.xhrLogout.generateRequest();
    } else {
      window.history.forward();
    }
  }
  const resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
  Polymer.importHref(
      resolvedPageUrl,
      null,
      this._showPage404.bind(this),
      true);
}

So if the user is connected, and navigates to the initial page, I can force them to stay on the page where they were with window.history.forward().