Angular ui router not redirecting with $location.path()

Question

I try to define in the run method of my module some simple route security.

But what ever I try, I get redirected to secure route although I'am not logged in:

            // Secure routes
            $rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) {
                if ("login" === toState.name) {
                    return;
                }

                let authorized = toState.data ? toState.data.authorization : false;

                if (!securityService.isAuthenticated && authorized !== true) {
                    $location.path("/login");
                }
            });

I tried $location.path("/login");, $location.url("/login");, window.location.href = "/login";, also I tried $rootScope.$apply etc. Nothing of those could make me redirect to login page.

EDIT: more detailed view

namespace testWeb {
    class AppComponent implements ng.IComponentOptions {
        template = `
        <div class="root"><div ui-view=""></div>
        </div>`;
        controller = AppController;
    }

    interface IAppController {
    }

    export class AppController implements IAppController {
    }

    angular.module("test", [
        "ui.router"
    ]).run(["$rootScope", "$state",
        function ($rootScope, $state) {
            // Secure routes
            $rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) {
                if ("login" === toState.name) {
                    return;
                }

                let authorized = toState.data ? toState.data.authorization : false;

                if (!securityService.isAuthenticated && authorized !== true) {
                        $state.go("login");
                }
            });
        }]).component("root", new AppComponent())
        .config(($stateProvider, $urlRouterProvider, $translateProvider) => {
            "ngInject";
            $urlRouterProvider.otherwise("/xyz");
            $stateProvider
                .state("login", {
                    url: "/login",
                    templateUrl: "scripts/components/login/login.html"
                });
        });
}

P.S. I use Angular 1.6 with TypeScript

user2263572 · Accepted Answer · 2017-04-21 13:16:28Z

2

If you are using ui-router you should be using $state.go('state_name')

 $rootScope.$on("$stateChangeStart", function (event, $state, toState, toParams, fromState, fromParams) {
                if ("login" === toState.name) {
                    return;
                }

                let authorized = toState.data ? toState.data.authorization : false;

                if (!securityService.isAuthenticated && authorized !== true) {
                    $state.go("login");
                }
            });

answered Apr 21, 2017 at 13:16

user2263572

5,6165 gold badges40 silver badges61 bronze badges

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

7 Comments

user2263572 Over a year ago

Did you inject $state? Is 'login" the name of your login state? Are there any errors in your developer console?

N.Zukowski Over a year ago

I injected $state and I don't get any error notifications on the console. I put a breakpoint, see this call and than happends nothing. I think there is something, that intercepts the call after I do $state.go() and redirects to the state again. Due to the fact that the application is pretty small, I could not find any interceptors, or watches, which could cause such a weird situation.

user2263572 Over a year ago

Without more code it will be impossible to troubleshoot further. The above will correctly navigate to the "login" state if that block of the if state is executed, so you can be sure that is working correctly now. But any other redirect logic can't be understood from your code samples.

N.Zukowski Over a year ago

See the edit. There is really nothing more than this.

user2263572 Over a year ago

I don't see securityService defined anywhere.

|

N.Zukowski · Accepted Answer · 2017-04-24 06:30:03Z

-1

Ok, the solution is as simple, as blocking the further execution of the event with event.preventDefault():

$rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) {
            if ("login" === toState.name) {
                return;
            }

            let authorizationRequired = toState.data ? toState.data.authorization : true;

            if (!securityService.isAuthenticated && authorizationRequired) {
                event.preventDefault();
                $state.go("login");
            }
        });

answered Apr 24, 2017 at 6:30

N.Zukowski

6011 gold badge14 silver badges31 bronze badges

Collectives™ on Stack Overflow

Angular ui router not redirecting with $location.path()

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related