[AngularJS] How to prevent a page load depending on the route's resolve return values.

[Aleck Landgraf]

Using angular's routing, I'm finding it difficult to prevent a page load if 
a user is unauthorized given I need to wait for the route's resolve payload.


Following the example here 
<https://medium.com/@GHengeveld/techniques-for-authentication-in-angularjs-applications-7bbf0346acec>,
 
preventing the route change can be accomplished by listing to the 
$routeChangeStart event, and calling event.preventDefault() if some logic 
is met, but in my case the condition logic is dependent on the resolve 
payload, which is still a promise until the $routeChangeSuccess.

$routeChangeSucces has enough info, with the returned $http promised from 
the server, but I cannot seem to prevent the route from completing.

Any suggestions?

Thanks,
Aleck



Here's some code for my issue:

app.config(['$routeProvider', function ($routeProvider) {

$routeProvider

        .when('/accounts/:organization_id/members', {
            controller: 'members_controller',
            templateUrl: 'partials/members.html',
            resolve: {
                'organization_payload': ['organization_service', '$route', 
function(organization_service, $route) {
                    var organization_id = 
$route.current.params.organization_id;
                    return 
organization_service.get_organization(organization_id);
                }],
                'auth_payload': ['auth_service', '$route', 
function(auth_service, $route) {
                    var organization_id = 
$route.current.params.organization_id;
                    return auth_service.is_authorized(organization_id, 
['can_invite_member', 'can_remove_member', 'can_assign_member_roles', 
'is_member']);
                }]
            },
            authorized_roles:  ['is_member']
         });
}]);

app.run([
    '$rootScope',
    'auth_service',
    function ($rootScope, auth_service) {
        // next.locals.auth_payload.auth doesn't exist at routeChangeStart
        $rootScope.$on('$routeChangeSuccess', function (event, next, 
current) {
          if (typeof authorized_roles !== "undefined") {
            for (var i=0; i < authorized_roles.length; i++) {
                var role = authorized_roles[i];
                if (!next.locals.auth_payload.auth[role]) {
                    event.preventDefault();   // <--- this doesn't prevent 
the route change
                    break;
                }
            }
        }
      });
}]);


-- 
You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.