maintaining session from server application in angularjs

Question

I have an angularjs application, in this application I have a login form when I submit it I call a rest service to authenticate the user to my server application, as following :

$http.get('http://localhost:8080/user', {
                headers : credentials ? {
            authorization : "Basic "
            + btoa(credentials.username + ":"
              + credentials.password)
          } : {};
              }).then(function(response) {
                if (response.data.name) {
                  $rootScope.authenticated = true;
                  $rootScope.username=response.data.name;
                  $rootScope.roles=response.data.authorities;
                  $rootScope.sessionid=response.data.details.sessionId;
                } else {
                  $rootScope.authenticated = false;
                }
              }, function() {
                $rootScope.authenticated = false;
              });

So the $rootScope will have all the informations about the authenticated user, but when I refresh my application, all those informations I attached to $rootScope are removed.

Notice that http://localhost:8080/user will always maintain the session.

How can I solve that ?

Walfrat · Accepted Answer · 2016-05-04 09:50:52Z

You can either store it in sessionStorage or just get the current user logged from server side. Then in order to retrieve them use an angular.run

angular.run(...function($http, $rootScope){
     // either use session storage or $http to retrieve your data and store them in $rootScope.
    // if you use $http i suggest you to store the promise of $http to be sure in your controller/route to wait that it has been resolved.
 });

The fact that you're loosing what you store when using f5 is normal, you lose all javascript context when doing so. The usage of angular.run permit to use the request before any controller is called However with $http you may need to wait the end of the promise. So it's better to have a reference to the promise store in $rootScope to be able to use it in the javascript part. You can reference directly the data in the templates as they will get refresh as soon they will be loaded.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Check for Local and Session storage service. You can easily attach informations to variables with getters and setters, and retrieving them through page refreshing.

Example: You can set a variable like this: localStorageService.set('myVar', data);

And then retrieve it in another controller, after refreshing, or elsewhere in your application with: localStorageService.get('myVar');

It is rather well documented and easy to use.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 4, 2016 at 9:51

Yassine Badache

1,8591 gold badge21 silver badges41 bronze badges

Collectives™ on Stack Overflow

maintaining session from server application in angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related