AngularJS: ui-router secured states

Question

I have one main controller for my app - AppCtrl and use ui-router. How can I make secured states?

$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
    var authorization = toState.data.authorization;

    if(!Security.isAuthenticated() && authorization != false)
        $location.path('/login');
});

For example I want to make books and authors states secured, and login state not secured.

.state('login', {
                url: '/login',
                templateUrl: /**/,
                controller: /**/,
                data: {
                    authorization: false
                }
            })
.state('books', {
                url: '/books',
                templateUrl: /**/,
                controller: /**/,
                data: {
                    authorization: true
                }
            })
.state('authors', {
                url: '/authors',
                templateUrl: /**/,
                controller: /**/,
                data: {
                    authorization: true
                }
            })

Security.isAuthenticated() function returns boolean. When I open /books everything works perfectly, page are being redirected to /login, when after redirecting I open /authors, page loads and it's content are shown, but browser's url is /login, so page being redirected, but somehow it's content are shown.

This example might be also useful: stackoverflow.com/questions/22537311/… — Dennis Kieselhorst
– Dennis Kieselhorst, Commented Dec 16, 2015 at 14:35

user3215609 · Accepted Answer · 2014-03-20 16:33:25Z

3

Figured out that I have to prevent opening next route, and go to login state. Made some changes and all works perfectly.

if (!Security.isAuthenticated() && authorization != false){
        event.preventDefault();
        $state.go('login');
    }

answered Mar 20, 2014 at 16:33

user3215609

5352 gold badges8 silver badges19 bronze badges

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

4 Comments

Stephane Over a year ago

Looks neat. May I ask where you put the if (!Security.isAuthenticated()... block ?

Stephane Over a year ago

Sorry. Just saw now you have it with the rootScope state change handler.

Stephane Over a year ago

I still wonder how to have it in my multiple modules application. In my case I need to have my rootScope in a module utilsModule.run( or in the app.run(. But then no way to reference the $state.current.data.securedRoute route data.

Cloudscape Germany Over a year ago

I would also be interested in alternatives to the .run() method.

Collectives™ on Stack Overflow

AngularJS: ui-router secured states

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related