title: Authentication: forced to refresh page to be authorised
body: <p>I'm using the code from <a href="https://blog.hyphe.me/token-based-authentication-with-node/" rel="nofollow">this blog</a> to make an authentication module for my angular app.</p>
  
  <p>I have a test page that includes a login form, a submit button and a "profile" button that will query a restricted route.</p>
  
  <pre><code>&lt;div class="container-fluid" ng-controller="AuthCtrl as auth"&gt;
      &lt;input type="text" ng-model="auth.user.username"&gt;
      &lt;input type="text" ng-model="auth.user.password"&gt;
      &lt;button ng-click="auth.login(auth.user)"&gt;LOGIN&lt;/button&gt;
      &lt;button ng-click="auth.profile()"&gt;PROFILE&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The restricted route I'm querying after login is defined as:</p>
  
  <pre><code>const authenticate = expressJwt({
    secret: SECRET
  });
  app.get('/me', authenticate, function(req, res) {
    res.status(200).json(req.user);
  });
  </code></pre>
  
  <p>The login works fine. I receive a token that I put in sessionStorage.
  When I click on the profile button (request to /me) I get an unauthorized error.</p>
  
  <p>If I refresh the page and click again on profile I do get the excpected behaviour. (/me returns user data with no error)</p>
  
  <p>If I delete the token manually after that, I still have access to /me until I refresh the page.</p>
  
  <p>This is my service:</p>
  
  <pre><code>function loginService($http) {
      this.login = function(user) {
          return $http.post('/auth', user).then(
              function(response) {
                  return response.data;
              },
              function(response) {
                  return response;
              });
      };
      this.profile = function() {
          return $http.get('/me').then(
              function(response) {
                  return response.data;
              },
              function(response) {
                  return response;
              });
      };
  }
  
  angular
      .module('app')
      .service('loginService', loginService);
  </code></pre>
  
  <p>And this is my controller with the httpProvider:</p>
  
  <pre><code>function AuthCtrl($window, $http, loginService) {
      this.user = {username: "", password: ""};
      this.login = function(user) {
          loginService.login(user).then(function(data) {
              $window.sessionStorage.token = data.token;
          });
      };
      this.profile = function() {
          loginService.profile().then(function(data) {
              console.log(data);
          });
      };
  }
  
  function config($httpProvider, $windowProvider) {
      var window = $windowProvider.$get();
      if(window.sessionStorage.token) {
          var token =  window.sessionStorage.token;
          $httpProvider.defaults.headers.common.Authorization = 'Bearer ' + token;
      }
  };
  
  angular
      .module('app')
      .config(config)
      .controller('AuthCtrl', AuthCtrl);
  </code></pre>
  
  <p>Could the problem come from storing the token in sessionStorage or from the http provider?</p>
  
  <p>Eventually I will implement the <a href="https://stormpath.com/blog/jwt-authentication-angularjs" rel="nofollow">secure cookie method</a> but I'd like to get this one solved before proceding further.</p>