angularjs view is loaded before resolve checks access

Question

I'm setting up an access control system in angular. This is how it looks so far. It's doing the ajax to return the current user's role, then checking that role with the access array to see if the user has permission. If not it redirects.

That all works fine, but the view is still being shown for a split second before the redirect.

It may also be important to note that the ajax request is necessary because the user auth is being handled with Laravel, so I made an API for Angular to talk to get information about the user's session.

var app = angular.module('application', ['ngResource']);

app.config(function($routeProvider){
    $routeProvider
        .when('/admin', {
            controller: 'showAdmin',
            templateUrl: 'admin.html',
            access: ['Admin', 'Manager'],
            resolve: AppCtrl.resolve
        });
});

function AppCtrl ($scope, getUser, $location, $rootScope) {

}

AppCtrl.resolve = {
    getUser : function($q, $http, $location, $rootScope) {
        return $http({
            method: 'GET',
            url: '/api/getUser'
        })
        .success(function(data, status) {
            $rootScope.user = data;
            if($rootScope.access.indexOf(data.permissions[0].role_name) < 0) $location.path('/');
        });
    }
};

app.run(function ($rootScope, sessionFactory, $location){
    $rootScope.$on('$routeChangeStart', function (event, next) {
        $rootScope.access = next.access;
    });
});

Answer 1

Use an ng-cloak directive on the containing element to eliminate the flicker. See this page for an example along with some CSS/browser-specific gotchas.