title: How do you do "remember me" functionality in AngularJS?
body: <p>I have a <a href="https://github.com/lightbody/roadmapper" rel="nofollow">simple app I'm building</a> using Play + AngularJS that requires authentication before most routes can be accessed. The login flow includes a "remember me" feature that stores a session ID in to the browser local storage and gets mapped to a valid authorized database session entry on the server side any time a user returns to the app.</p>
  
  <p>The problem I'm having is that I do the session checking (extract cookie &amp; compare against server) in the <a href="https://github.com/lightbody/roadmapper/blob/master/public/js/roadmapper.js#L157" rel="nofollow">run() function</a> of the module:</p>
  
  <pre><code>    .run(function ($rootScope, $http, $cookieStore, $location) {
          // &lt;snip&gt;
  
          // check if there is already a session?
          var sessionId = window.localStorage["session.id"];
          if (sessionId == null) {
              sessionId = $cookieStore.get("session.id");
          }
  
          if (sessionId != null) {
              $http.get("/sessions/" + sessionId)
                  .success(function (data) {
                      $http.defaults.headers.common['X-Session-ID'] = data.id;
                      $cookieStore.put("session.id", data.id);
  
                      $rootScope.user = data.user;
                  })
                  .error(function () {
                      // remove the cookie, since it's dead
                      $cookieStore.remove("session.id");
                      window.localStorage.removeItem("session.id");
                      $location.path("/login");
                  });
          } else {
              if ($location.path() != "/login" &amp;&amp; $location.path() != "/signup") {
                  $location.path("/login");
              }
          }
      });
  </code></pre>
  
  <p>The problem is that this function executes an AJAX call and I don't know if the session is valid until it completes. However, the controller that loads (via the route selected by $routeProvider) can fire away another AJAX call that often kicks off before the other one finishes, resulting in a race condition and the initial request getting a 401 response code.</p>
  
  <p>So my question is: how can I force run (with its associated $http call) to complete before any other part of the app runs? I have tried using $q/promise here and it doesn't seem to make a difference (perhaps run functions don't honor promises). I've been advisor to use <code>resolve</code> feature in <a href="http://docs.angularjs.org/api/ng.%24routeProvider" rel="nofollow">$routeProvider</a> but I don't know exactly what to do and I'm not super execited about having to put that in for every route anyway.</p>
  
  <p>I assume this is a pretty common use case and it gets solved every day. Hopefully someone can give me some direction with my code, or share their approaches for "remember me" and AngularJS.</p>