title: page refresh causing user to get log out automatically in angular js
body: <p>I have a Login API which I am using it in my service</p>
  
  <pre><code>function logInToService(callback, errback, login, password, rememberLogin) {
              var url = "User/Login";
  
              var authorizationHeader = {'Authorization': "Basic " + login + ":" + password};
              httpWrapperService.post(url, {login: login, password: password}, authorizationHeader).then(
                  function success(loginToken) {
                      // transform data here
  
                      self.currentUser.emailAddress = login;
                      self.currentUser.password = password;
                      // store token in a cookie
                      self.currentUser.token = loginToken;
                      $rootScope.currentUser = self.currentUser;
  
  
                      if (rememberLogin) {
  
                          localStorage.userName=login;
                          localStorage.password=password;
                      }
  
                      httpWrapperService.setAuthenticationToken(loginToken);
                      callback(loginToken);
                  },
                  function error(errorObject) {
                      errback(errorObject);
                  }
              );
          }
  </code></pre>
  
  <p>And in my header html I am displaying the user name on top when he gets logged in
  <strong>Header.html</strong></p>
  
  <pre><code> &lt;div class="header-user-menu"&gt;
          &lt;div ng-show="isUserLoggedIn() == false "&gt;
              &lt;a href="" ng-click="$state.go('app.sr.login')" class=""&gt;{{'HEADER.LOGIN' | translate}}&lt;/a&gt;
              &lt;!--&lt;a ui-sref="app.sr.login" class=""&gt;{{'HEADER.LOGIN' | translate}}&lt;/a&gt;--&gt;
          &lt;/div&gt;
          &lt;div ng-show="isUserLoggedIn()" class="userName"&gt;{{'HEADER.WELCOME' | translate}} {{currentUser.emailAddress}}&lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>and js file is here</p>
  
  <pre><code>(function() {
      'use strict';
  
      angular
          .module('safe-repository')
          .controller('AppLayoutCtrl', appLayoutCtrl);
  
      // Implementation of controller 
      appLayoutCtrl.$inject = ['$rootScope', '$scope'];
  
      function appLayoutCtrl($rootScope, $scope) {
  
  
          $scope.isUserLoggedIn = isUserLoggedIn;
  
          function isUserLoggedIn() {
              if ($rootScope.currentUser
                  &amp;&amp; $rootScope.currentUser.emailAddress != null
                  &amp;&amp; $rootScope.currentUser.emailAddress != '') {
                  return true;
              }
              return false;
          }
  
      }
  })();
  </code></pre>
  
  <p>and here I have one registration service where I have defined <code>logInToService</code> method</p>
  
  <pre><code>function registrationService($rootScope, httpWrapperService, $modal, $state, $cookieStore) {
          var self = this;
          // expose functions
          self.hasUserAccessToLevel = hasUserAccessToLevel;
          self.logInToService = logInToService;
          self.getCurrentUserToken = getCurrentUserToken;
          self.showRegistrationViewForLevel = showRegistrationViewForLevel;
          self.currentUser = {
              //emailAddress: '',
              //password: '',
              //token: ''
          }
  
          $rootScope.currentUser = null;
          self.currentUserToken = null;
  
   function logInToservice (------){----}})();
  </code></pre>
  
  <p>The problem is that every time when user presses page refresh F5 , user gets logged out. Even though I am trying to store the data in localstorage , but actually I am not getting the flow of control.</p>