0

I am trying to use angularJS UI routing. I have three webpages, clients can access the first page through some link but if the url has a token attached to it I am doing a $state.go('second-page') in the controller. If the token is null I keep the client on the first page. However I want that when the client presses the back button on the browser the client should go to the first page. Which does not happen.

So the scenario is

client comes through the link

'#/form/calendar/:officeId/:token'

and since the token is not null I transition to the second page which does not have a URL the URL now becomes

'#/form/'

but when the client presses the back button it tries to go to

'#/form/calendar/:officeId/:token'

which results in a cyclic transition to the second page and the client can never reach the first page.

Please advise on how to avoid this.

Thank You

Improve this question

2 Answers 2

Reset to default
1

There's nothing in the router that's really designed for this, but it's fairly easy to implement yourself. The router posts a $stateChangeStart event that you can listen to. On the second trigger you would simply want to inhibit this redirect. Or simply DO the redirect in there, one time:

var redirected = false;
$rootScope.$on('$stateChangeStart', function(e, to, toParams, from, fromParams) {
    // Redirect the user but only once
    if (!redirected && toState.whateverYouWantToCheck) {
        e.preventDefault();
        redirected = true;
        $state.go(...);
    }
});

This will allow you to perform the redirect but only one time.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I tried to put this function inside my controller like this: app.controller('calendarCntrl', function($rootScope, $scope,$stateParams,$state) { var redirected = false; $rootScope.$on('$stateChangeStart', function(e, to, toParams, from, fromParams) { // Redirect the user but only once if (!redirected && toState.token != null) { e.preventDefault(); redirected = true; $state.go('form.clientInfo-token'); } }); But it did not hit the function am I missing something ?
If your controller is part of the routing states, it won't have been loaded until after the state change has occurred. You need to move it elsewhere, such as in a main controller that's always running, a service, etc.
I went with the replace method but this works too! Thank You Chad!
YOU MY FRIEND ARE A GENIUS, my boss wanted me to do it your way :)
1

You could perform your redirect from #/form/calendar/:officeId/:token to #/form/ using the replace method of the $location service. This will replace the current browser history entry with the new page, instead of adding a new one.

AngularJS description of the replace function:

replace() - If called, all changes to $location during current $digest will be replacing current history record, instead of adding new one.

You would perform the redirect like this:

$location.path('/form').replace();

Docs for $location service

Improve this answer

4 Comments

This method fails since there is no URL for the second page to do the location.path to. It is a state change so there is a state name but no location. .state('form.clientInfo-token', { templateUrl: 'clientInfo.html' })
Assuming you are using ui-router (because your example is using the state service), you can configure your states to be associated with a url. Example from the ui-router docs: $stateProvider.state('state1', { url: "/state1", templateUrl: "partials/state1.html" }). I use this method in my AngularJS app.
I'm glad it worked! If you want to restrict the /form URL from being public, you could try to listen to the $stateChangeSuccess event similar to Chad Robinson's answer, and redirect somewhere else if the fromState isn't the allowed one.
I actually created three states one with a reachable URL one without and one for the location redirect and allowed the client to access the URL only in one case which is not easy to do so. My boss approved it :D.. Thank You so very much!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.