Angular ui-router issue with state.go()

Question

I have checks to see weather a user has access to pages which is executed inside $stateChangeStart

Here it is

$rootScope.$on('$stateChangeStart', function (event, toState) {
        if ($rootScope.accessRights.length > 0) {
            if (toState.data.accessControlled == true) {

                var userHasAccess = false;
                for (var i = 0; i < $rootScope.accessControlledPages.length; i++) {
                    if (toState.name == $rootScope.accessControlledPages[i].page) {
                        userHasAccess = true;
                        break;
                    }
                }
                //If user has access do nada, else redirect them to 404 page or page to TBD
                if (!userHasAccess) {
                    event.preventDefault();
                    $state.go('Errors');
                }   
            }
        }
        else
        {
            processPageAccess();
            $state.go(toState.name);
        }

    });

The problem I have is that $state.go('Errors');

Does nothing, I just stay on the page that I was on when I attempted to navigate to the access controlled page. Is there something I'm not doing

I think it could be the same problem described here, and there, is already answered. — troig
– troig, Commented Aug 12, 2015 at 12:58

Alexander Strochkov · Accepted Answer · 2015-08-12 12:11:27Z

2

As i know you need something like this to avoid state changes loops:

$rootScope.$on('$stateChangeStart',function (event, toState, toParams, fromState, fromParams) {
event.preventDefault();
// If authorized, use call state.go without triggering the event.
// Then trigger $stateChangeSuccess manually to resume the rest of the process
// Note: This is a pseudo-hacky fix which should be fixed in future ui-router versions
if (!$rootScope.$broadcast('$stateChangeStart', toState, toParams, fromState, fromParams).defaultPrevented) {
    $rootScope.$broadcast('$stateChangePermissionAccepted', toState, toParams);

    $state.go(toState.name, toParams, {notify: false}).then(function() {
        $rootScope.$broadcast('$stateChangeSuccess', toState, toParams, fromState, fromParams);
   });
}
})

As example you can see here

answered Aug 12, 2015 at 12:11

Alexander Strochkov

4172 silver badges8 bronze badges

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

Comments

Mohan Singh · Accepted Answer · 2015-08-12 11:56:54Z

0

if (!userHasAccess) {
   $state.go('Errors');
}

Simply remove event.preventDefault();

event.preventDefault(); is used to cancel the state transition.

answered Aug 12, 2015 at 11:56

Mohan Singh

8838 silver badges18 bronze badges

2 Comments

JKX Over a year ago

I'm trying to stop the original transition but not the $state.go('Errors);

Mohan Singh Over a year ago

Make sure error state do not have data.accessControlled = true.

JKX · Accepted Answer · 2015-08-12 12:20:23Z

0

Idiot mistake, wasn't injecting $state to the controller. Recently moved to ui-router from regular angular routing and hadn't updated all the controllers

answered Aug 12, 2015 at 12:20

JKX

1873 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angular ui-router issue with state.go()

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related