在AngularJS中的应用程序启动时初始化当前用户服务

Question

I'm developing a Single Page Application with AngularJS.

When a user successfully logs in, a security token is stored in a cookie. Now, when he refreshes the page, the token will be sent to the backend, which returns a JSON object "currentUser" containing all the relevant information about the current user (as name, access-groups, profile picture, etc.).

The problem is, this is an asynchronous process of course, so when the controller starts another operation, say, just alerting the user's name, this value will be undefined at that time.

Of course, I could set a timeout but is there a better solution?

I thought about a "currentUserService", which initializes first (sending the cookie and filling the user information with the backend response) and can only be processed after this initialization is completed.

But how can this be done? Or are there any other possibilities?

---

edit: Hi guys, thanks for the input!

Both of your suggestions seem to be very promising for asynchronous requests in general, but I think they might not fit perfectly for my concern:

The information about the current user only have to be requested once , so I would like to store them for the whole application (eg in the rootScope or a service) accessible from any controller without having to request them again in every controller (as in the callback or resolve-solution) but make sure that there won't be any „timeout“ problems. Do you have any ideas?

Answer 1

If a user refreshes you have to initialize everything. I assume the token is stored in localstorage or something and I assume this is angular 1.*. To do this I think you should call user-related functions from your http call-callback:

  $scope.user = {};

  $scope.getUser = function(){
    $http({
       method: 'GET',
       url: '/someUrl'
    }).then(function (res) {

      $scope.user = res.data; //or whatever the response is
      $scope.handleUserRelatedThings();

    }).catch(function(err) {

      //handle error

    })

  }

  $scope.handleUserRelatedThings = function(){

   //do things with $scope.user
   alert($scope.user.name);

  }

  //on init
  $scope.getUser();

Answer 2

You can resolve the user's data before the view loads either with ng-route or ui-router :

This example is written for ui-router :

.state('profile', {
 url: '/profile',
 controller: 'profileCtrl as vm',
 resolve: {
  user: function(AuthService) {
   //Return a promise or an object to be resolved.
   return AuthService.getUserFromToken(); //Say this is asynchronous and returns a promise
  }
 }
});

//In controller:
.controller('profileCtrl', function(... , user) {
 //User data available here
 this.user = user;
});

Please note if any errors arise during the resolve stage the state will not be loaded so you'll have to take care of the errors!