ui-router: open modal on $stateChangeEvent

Question

Some states in my app require further authentication. Eg a Edit state should prompt the user to enter a one time password.

I would be nice to solve this horizontally: attach metadata to the states requiring extra auth (ie state.requiresExtraAuth: true), and plug some modal logic on the state change events. NOTE: What I am after is that the state does indeed load and the user can see it, but a modal forbids the user from continuing without entering the password.

I tried adding a 'onEnter' property to the toState object param I get in the event listener function, but it didn't work :).

Is something like that possible/how would you go about designing this use case?

Maybe [this](http://stackoverflow.com/a/25197497/1679310) or [that](http://stackoverflow.com/a/24725180/1679310) could help... — Radim Köhler, Sep 25 '14 at 10:05
edited my question to be more specific: What I am after is that the state does indeed load and the user can see it, but a modal forbids the user from continuing without entering the password — thanos panousis, Sep 25 '14 at 12:07

score 0 · Answer 1 · answered Sep 25 '14 at 10:11

In run method of you application.

add.run(function($rootScope, $state, $modal){
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ 
        if(toState.name != 'app.home') {
            $state.go('app.login');
            // or open modal
            $modal.open({...});
        }
    });
});

This event will help you to check what state user try to access and redirect to login form if needed.

ui-router: open modal on $stateChangeEvent

1 Answers1