Javascript - How to redirect to homepage if back button in clicked

Question

I have been doing research and looking at different solutions but can't seem to find one that fits my need. I have an AngularJS app that is doing some changes on systems. It has many HTML views for showing changes, pushing and removing changes if something goes wrong. So app goes like this:

Page 1:  Login and get user input
Page 2:  Show changes that user is going to commit
Page 3:  Push changes
Page 4:  Show results
They have an option to remove changes if something does no look right.

I am writing python scripts for performing changes on systems and using Flask for APIs.

Now my issue is if the user is on Page 4 and hits the back button, it goes back to 'push changes' page and actually starts pushing same changes all over again. Is there any way I can modify it so if on any page user hits the back button on the browser, it sends them back to the homepage?

Sharing the code won't help as I have many files with tons of code. Here is some overview of my routes and views that might make it a bit clear:

app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "./views/userForm.htm",
        controller : "inputController"
    })
    .when("/checkChanges", {
        templateUrl : "./views/checkChanges.htm",
        controller : "checkChangesController"
    })
    .when("/pushChanges", {
        templateUrl : "./views/pushChanges.htm",
        controller : "pushChangesController"
    })
    .when("/results", {
        templateUrl : "./views/results.htm",
        controller : "resultsController"
    })
    .when("/remove", {
        templateUrl : "./views/remove.htm",
        controller : "removeController"
    })

You can try looking at [AngularJS redirect a route only on browser's back button](https://stackoverflow.com/questions/19686169/angularjs-redirect-a-route-only-on-browsers-back-button) as a possiblity. — CodeMonkey, Sep 25 '18 at 23:39

Jesus Duran · Accepted Answer · 2018-10-05T08:29:12.783

1

You can add popstate listener to handle events of user hitting back or forward buttons.

window.addEventListener('popstate', function() {
    $state.go(...); //go to your home state
});

UPDATE: how to redirect to home state

Whit the next piece of code, you are creating the component home, setting its HTML template, controller and then, adding a configuration to map it to the URL '/'.

var home = {
    templateUrl: './templates/home.html',
    controller: 'homeController'
};

angular
    .module('myApp')
    .component('home', home)
    .config(["$stateProvider", function($stateProvider){
        $stateProvider
            .state('home', {
                url: '/',
                component: 'home',
            });
    }]);

Then, in the event listener for the popstate event, you would have $state.go('home');

edited Oct 05 '18 at 08:29

answered Sep 26 '18 at 10:43

Jesus Duran

333
2
14

Will it go inside each controller? – Damon Sep 26 '18 at 14:41
No, you just need to run this code once, so the listener is registered in the browser. I have added it in the main controller of my app, in order to make sure it is always executed. Once the listener has been added, it will be launched regardless of the state your AngularJS app is. – Jesus Duran Sep 27 '18 at 14:36
@Jessus Duran, Couldn't get state.go to work so I replaced it with $location.path("/"); It did send me back to home, however, when I looked at logs, it also kicked the API call on the previous page. So, if I am on "/results" page and hit back. it goes to home but also triggers API on "/pushChanges" which is the previous page. – Damon Sep 27 '18 at 19:43
I had no trouble to make `$state.go` working :( Using $location service it is a bit different, since you can change the URL without making the page to reload, so I guess that's why you are getting hits on "/pushChanges": when the user press back button in the browser, your app goes to "/pushChanges", and then you change the URL to make your app go to a different state. – Jesus Duran Sep 28 '18 at 17:14
So do I need something like this: $state.go('/'); I would like to send the user to home where ever they press back button. – Damon Oct 01 '18 at 20:00
I edited the answer to add a small snippet with the code you need to redirect the app to your home state. – Jesus Duran Oct 05 '18 at 08:30

score 1 · Answer 2 · answered Sep 26 '18 at 14:30

1

Try this;

 window.addEventListener('popstate', () => { //handler });

answered Sep 26 '18 at 14:30

Mokky Miah

1,213
2
11
29

Javascript - How to redirect to homepage if back button in clicked

2 Answers2