title: Cancel route and redirect to other route without displaying the original content in AngularJS
body: <p>I want to check an http services to see if a user is authenticated and if it has permission to see the certain page (controller) in AngularJS 1.2.0rc1. </p>
  
  <p>I have this scenario: 
  User A wants to visit <a href="http://www.example.com/content" rel="nofollow noreferrer">http://www.example.com/content</a>. Now this content should not be accessible when he or she is not authenticated. If the user is not authenticated, they should be redirected to <a href="http://www.example.com/login" rel="nofollow noreferrer">http://www.example.com/login</a>. </p>
  
  <p>Now I managed to do this, but I see the rendered html of the content page briefly. I don't want this. How do I redirect to the login page, without rendering the content page?</p>
  
  <p>I register my routes as such:</p>
  
  <pre><code>$routeProvider.when('/login', route.resolve('Login', false))
  $routeProvider.when('/content', route.resolve('Content', true))
  </code></pre>
  
  <p>Now I've tried this:</p>
  
  <pre><code>$rootScope.$on('$routeChangeStart', function (event, route) {
      if (route.requiresLogin) {
          $http.get('/api/user/loggedin/').then(function (response) {
              if (response !== 'true') {
                  $location.path('/login');
              }
          });
      }
  });
  </code></pre>
  
  <p>Which works, but I still see the content of the html of the other page (content) flashing. </p>
  
  <p>I've read that <a href="https://stackoverflow.com/questions/13962351/angularjs-detecting-stalling-and-cancelling-route-changes">here</a> that you can also try to change the resolve functionality when the route is resolved:</p>
  
  <pre><code>    var resolve = function (baseName, requiresLogin) {
      var routeDef = {};
      var dependencies = [routeConfig.getControllersDirectory() + baseName + 'Controller.js'];
  
      routeDef.templateUrl = routeConfig.getViewsDirectory() + baseName.toLowerCase() + '.html';
      routeDef.controller = baseName + 'Controller';
      routeDef.requiresLogin = requiresLogin;
      routeDef.resolve = {
          load: ['$q', '$rootScope', '$http', '$location', function ($q, $rootScope, $http, $location) {
              console.log(requiresLogin);
              if (requiresLogin) {
                  return checkLoggedIn($q, $rootScope, $http, $location);
              } else {
                  return resolveDependencies($q, $rootScope, dependencies);
              }
          }]
      };
  
      return routeDef;
  }
  </code></pre>
  
  <p>But here the page is also displayed briefly.</p>
  
  <p>Hope that you can help me out.</p>