Angular: take user to home on clicking browser bac

问题:

This question already has answers here:

History push state redirects instead of just pushing new state to browser history (2 answers)

Closed last year.

I want to take the user to the home page when a user clicks on the back button of the browser if the user is in my angular platform.

There is an edge case as well which is to be handled, if user has come to our platform via google search, Fb or direct entering link, then we cant this behavior but if he ia already roaming around in our platform then we don't want each back button to take user to home.

i.e.

1. User Enter the link and press button => take him to home.

2. User Enters the link and now clicks on a button or link and app state is changed, now user clicks browser back button => take user back to previos page (normal behaviour)

Demo: click on the link below and and then click on the 1st link on google search and then try hitting browser back button you will see it takes you to the home page.

https://www.google.com/search?ei=EnmkXJmYCIGLvQTinL_ICw&q=gap+men+shirts+ae&oq=gap+men+shirts+ae&gs_l=psy-ab.3...6313.6796..6983...0.0..0.141.399.0j3......0....1..gws-wiz.......0i71j0i22i30j0i22i10i30.To9hLinHj7I

I tried to implement it using pushState()

ngAfterViewInit() {
    console.log('init called');
    var x = document.referrer;
    console.log('ref', x);

    console.log(this.angLocation.path());

    if (x) {
      console.log('pushing state');
      this.location.pushState({id:'page3'}, 'Page3', '/page3');
    }
}

Click on the link below see it in action https://angular-tet5fy.stackblitz.io/page2?fbclid=IwAR1zP_UTnCQxKMp8o3ZXf-n4NR3ftu_4JoulLqItaONa-_wSPJ_DT95OgRU

Expected behavior: 1. Clicking on the link takes the user to page2. 2. While page2 is initialized it should push state '/page3' to the browser history. 3. When the user clicks the browser back now it should take to /page3 as it is was pushed to history in step2 above.

Current Behaviour: 1. Clicking on the link, takes me to page2 but it automatically redirects to /page3 while pushing state. 2. When clicked browser back, it takes me back to /page2.

回答1:

You can use history.pushState(null, null, 'https://twitter.com/hello'); and pass as third parameter the home link of your app. In this case pressing back will move the user to the Home page.

Have a look here; window.history API

Or: css-tricks

回答2:

What they did in that page is a bit tricky. The trick is creating a new history with history.pushState and then subscribe to the pop event of the location to change the webpage to the home .

I suggest to do something a little different and easier, that code only needs this lines:

  let locat = location.href;
    if (!!window.location.pathname && window.location.pathname !== '/') {
        history.replaceState(null,null,location.origin);
        history.pushState(null, null,locat);
    }

What we do here it's change the url to the home you want with history.replaceState(null,null,location.origin); and then make a new entry in the history with history.pushState(null, null,locat); witht he first url.

Example here:

https://stackblitz.com/edit/angular-stack-home-redirect-history?file=src/app/app.component.ts

Try it out here: https://angular-stack-home-redirect-history.stackblitz.io/bye