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?

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
– thanos panousis, Commented Sep 25, 2014 at 12:07

Sergey Romanov · Accepted Answer · 2014-09-25 10:11:57Z

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.

Collectives™ on Stack Overflow

ui-router: open modal on $stateChangeEvent

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related