Resolve user data after full page reload in AngularJS

Question

In my angular application, after full page reload happens, I want to be able to retrieve the user information via $http.get and if the user is logged in($http.get returns user info) then I want to show the 'about me' page, if user is not logged in then they should see the login page.

Currently I tried doing this in application.run method as shown in the code below, but since $http is async, the $rootScope.currentUser does not get set for some time and I get transferred to the login page by my $routeChangeStart event handler even when i'm logged in.

myAPp.config(function ($routeProvider) {
    $routeProvider.when('/', {
      templateUrl: '/app/homeView/home.html',
      controller: 'HomeViewController'
    }).when('/login', {
      templateUrl: '/app/loginView/login.html',
      controller: 'LoginController'
    }).when('/me', {
      templateUrl: '/app/userInfoView/userInfo.html',
      controller: 'UserInfoController',
      access: {
        requiresLogin: true
      }
    }).otherwise({
      redirectTo: '/'
    });
  }
);

myApp.run(function ($rootScope, $cookies, $location, UserService) {
  UserService.getCurrentUser().then(
    function (response) {
      $rootScope.currentUser = response;
    },
    function () {
      $rootScope.currentUser = null;
    }
  );

  $rootScope.$on('$routeChangeStart', function (event, next) {
    if (next.access !== undefined) {
      if (next.access.requiresLogin && !$rootScope.currentUser) {
        $location.path('/login');
      } else {
        $location.path('/me');
      }
    }
  });
});

What is the correct way to solve this problem?

charlietfl · Accepted Answer · 2016-02-17 22:32:06Z

2

Following what @FuzzyTree started the following should do what you need

myApp.run(function($rootScope, $cookies, $location, UserService) {
  var userPromise = UserService.getCurrentUser().then(
    function(response) {
      $rootScope.currentUser = response;
    },
    function() {
      $rootScope.currentUser = null;
    }
  );

  $rootScope.$on('$routeChangeStart', function(event, next) {
    if (next.access !== undefined) {
      if (next.access.requiresLogin && !$rootScope.currentUser) {
        // prevent this change
        event.preventDefault();
        // let user promise determine which way to go
        userPromise.then(function() {
          // will call another `$routeChangeStart` but 
          // that one will pass around the above conditional
          $location.path('/me');// modify using `next.url` if app gets more robust
        }).catch(function() {
          $location.path('/login');
        });

      }
    }
  });
});

answered Feb 17, 2016 at 22:32

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tomas Over a year ago

Actually this works only when I remove ' event.preventDefault();' With prevent default the url in my browser changes, but the view for '/me' never gets loaded, I just see a blank screen.

terafor · Accepted Answer · 2016-02-17 22:18:28Z

1

you can:

check user then bootstrap angular application https://docs.angularjs.org/api/ng/function/angular.bootstrap
show state loading until user checking is over

answered Feb 17, 2016 at 22:18

terafor

1,62622 silver badges29 bronze badges

Collectives™ on Stack Overflow

Resolve user data after full page reload in AngularJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related