CODEWITHSUNDEEP
angularjsfirebaseangularfire
Markus Gray
Markus Gray

Reputation: 525

$rootScope.currentUser is null on refresh

I was able to get the firebaseSimpleLogin working and storing the current user in the rootScope. When I goto another page and come back to the feed page everything loads, but when I refresh $rootScope.currentUser is null. Has anyone else had this issue?

I have this piece of code in my app.run function:

$rootScope.$on('$firebaseSimpleLogin:login',function(e, auth){
   $rootScope.currentUser = User.find(auth.id);
});

And this is my FeedCtrl that is trying to load in the user's posts

app.controller('FeedCtrl',['$scope', '$rootScope','User','Auth','Post',function($scope,     $rootScope,User,Auth,Post){
 populateFeed();
 console.log($rootScope.currentUser);

$scope.logout = function(){
   Auth.logout();
};


$scope.savePost = function(){
  Post.create($scope.post).then(function(post){
    $scope.post.text = "";
  });
};

function populateFeed(){
   $scope.posts = {};
   angular.forEach($rootScope.currentUser.posts,function(id){
    $scope.posts[id] = Post.find(id);
   });
}

}]);

My Main app Module

var app = angular.module('myapp',['ui.router','firebase']);

app.config(function($stateProvider, $urlRouterProvider){
  $stateProvider
.state('/',{
  url: '/',
  controller: 'MainCtrl',
  templateUrl: 'views/index.html'
})
.state('feed',{
  url: '/feed',
  controller: 'FeedCtrl',
  templateUrl: 'views/feed.html',
  authenticate: true
})
.state('login',{
  url: '/login',
  controller: 'LoginCtrl',
  templateUrl: 'views/login.html'
})
.state('signup',{
  url: '/signup',
  controller: 'LoginCtrl',
  templateUrl: 'views/signup.html'
})
.state('settings',{
  url: '/settings',
  controller: 'SettingsCtrl',
  templateUrl:"views/settings.html"
})
.state('profile',{
  url: '/:slug',
  controller: 'ProfileCtrl',
  templateUrl: 'views/profile.html'
})
.state('profile-about',{
  url: '/:slug/about',
  controller: 'ProfileCtrl',
  templateUrl: 'views/profile.html'
});

$urlRouterProvider.otherwise('/');
})
.constant('FIREBASE_URL','https://{FIREBASE}.firebaseio.com/')
.run(function($rootScope, $state,FIREBASE_URL, $firebaseSimpleLogin, User, Auth){
$rootScope.$on('$stateChangeStart',function(event, next){
  if(next.authenticate && !User.getCurrentUser()){
     $state.go('login');
  }
 });

 $rootScope.$on('$firebaseSimpleLogin:login',function(e, auth){
   $rootScope.currentUser = User.find(auth.id);
  });

 $rootScope.$on('$firebaseSimpleLogin:logout',function(){
  delete $rootScope.currentUser;
  $state.go('login');
 });

 $rootScope.logout = function(){
  Auth.logout();
};

});

Upvotes: 18

Views: 21162

Answers (2)

A. El Idrissi
A. El Idrissi

Reputation: 487

To store it in localStorage: $window.localStorage.setItem("currentUser", currentUser);

or store in json format: $window.localStorage.setItem("currentUser", angular.toJson(currentUser));

To get it form there: var currentUser = $window.localStorage.getItem("currentUser");

or if you saved it using the second way: var currentUser = JSON.parse($window.localStorage.getItem("currentUser"));

Upvotes: 10

lindstromhenrik
lindstromhenrik

Reputation: 1143

If you by 'refresh' mean that you hit F5 in the browser that will wipe your $rootscope from memory and you will get null back as you experience (basically your entire app will be 'restarted').

In order to persist values you either need to store them in a cookie or use localStorage/sessionStorage. For example, instead of using $rootscope.currentUser use $window.sessionStorage.currentUser.

Upvotes: 28

Related Questions