title: angularjs redirect to login page if not authenticated with exceptions
body: <p>EDIT: forgot to mention that i've been working with AngularJs for a week only, so if you see something you think should be changed for the better and is not related to the question itself feel free to tell me on the comments section.</p>
  
  <hr> 
  
  <p>ok, so I have my authentication Controllers and providers which I won't show because they're irrelevant for the scope of the question.
  Then I have an interceptor to check if the user is authenticated when a Call is made. If so I set the <code>Authentication</code> header on the request to include the user's Token if not I redirect the user to the login page and don't even make the request to the server (obviously if someone bypasses this theres also an <code>Authorize</code> on the API). </p>
  
  <p>What I want is to add a few exceptions, meaning there are some pages I want to allow even if the user has no Auth Token. I'm able to this if it's a specific path, but I want to allow my 404 page to be accessed and it's in the <code>Routing</code> that I'm specifying <code>.otherwise</code> to go to the 404 page, how can I make so that my interceptor only redirects to login if it's not going to this page.</p>
  
  <p>The interceptor</p>
  
  <pre><code>.factory('authInterceptorService', ['$q', '$location', 'localStorageService', function ($q, $location, localStorageService) {
  
      var authInterceptorServiceFactory = {};
  
      var authData = localStorageService.get('authorizationData');
  
      var _request = function (config) {
  
          config.headers = config.headers || {};
  
          if (authData) {
              config.headers.Authorization = 'Bearer ' + authData.token;
          } else if ($location.path != '/accounts/login' &amp;&amp; $location.path != '/accounts/register') {
              $location.path('/accounts/login');
          }
  
          return config;
      }
  
      var _responseError = function (rejection) {
          if (rejection.status === 401) {
              $location.path('/accounts/login');
          }
          return $q.reject(rejection);
      }
  
      authInterceptorServiceFactory.request = _request;
      authInterceptorServiceFactory.responseError = _responseError;
  
      return authInterceptorServiceFactory;
  }])
  </code></pre>
  
  <p>and in my Routing</p>
  
  <pre><code> $urlRouterProvider.otherwise('/page-not-found');
  
   $stateProvider
       (...)//rest of the states
  
       .state('page-not-found', {
           url: '/page-not-found',
           templateUrl: '/Content/partials/error/404.html',
           data: {
               displayName: false
           }
       })
  
       (...)//rest of the states
  </code></pre>
  
  <p>I tried to add <code>'/page-not-found'</code> to my <code>if</code> but it won't work as expected because by the time the location is checked for the first time it's still not redirected.</p>
  
  <p><strong>edit</strong>
  As sugested by charlietfl I'm now trying to use resolve but it's not even passing my function.</p>
  
  <p>I removed this code from my interceptor:</p>
  
  <pre><code>else if ($location.path != '/accounts/login' &amp;&amp; $location.path != '/accounts/register') {
      $location.path('/accounts/login');
  }
  </code></pre>
  
  <p>and add a new <code>service</code> to the authentication module:</p>
  
  <pre><code>.service('authCheckService', ['$http', '$q', 'localStorageService', function ($http, $q, localStorageService) {
      var self = {
          'onlyLoggedIn': function ($state, $q) {
              var deferred = $q.defer();
              var authData = localStorageService.get('authorizationData');
              console.log(authData);
              if (authData) {
                  deferred.resolve();
              } else {
                  deferred.reject();
                  $state.go('login');
              }
              return deferred.promise;
          }
      }
  
      return self;
  }]);
  </code></pre>
  
  <p>and i'm trying to call it as:</p>
  
  <pre><code>.state('smo-dashboard', {
          url: '/dashboard',
          templateUrl: '/Content/partials/dashboard.html',
          resolve: authCheckServiceProvider.onlyLoggedIn
  })
  </code></pre>
  
  <p>notice that i'm trying to log authData <code>var</code> to check if it's working but it isn't and there's no error on the console also.</p>