AngularJs save user data into session after authentication

Question

I'm new to AngularJS, and now I'm trying to build my first system with authentication. Everything works, except, when a user refreshes the page, all the user info is gone...

I followed this tutorial:

http://www.sitepoint.com/implementing-authentication-angular-applications/

Now this is how I tend to make sure the user data stays where its supposed to be:

When a user logs in, my API returns his/hers details in JSON, which then is dropped into both a $rootScope variable for use in the site, and also in a session. Next to that, I have a variable in the rootscope that returns true when signed in, and false when not, like this:

$rootScope.loggedin = true;
$rootScope.user = data;
$window.sessionStorage["info"] = data;
// console.log($window.sessionStorage["info"]);

This all happens in the Authentication factory.

Then when a user refreshes, and that same factory is ran once again, the following function will start to work:

function init() {
    if ($window.sessionStorage["info"]) {
        $rootScope.loggedin = true;
        $rootScope.user = $window.sessionStorage["info"];
        info = $window.sessionStorage["info"];
    }
}
init();

(I think this will work because that article and various other sources on the web said so.)

Then in my HTML, I use the loggedin variable to determine if a user is logged in:

<div ng-show="!loggedin">
    <a href="/login" class="btn  btn-default btn-flat sidebar-toggle" style="position:relative;top:-3px; right: 5px;">Log in </a>
    <a class="btn btn-default btn-raised" style="background: #03A9F4; color:#fff; position:relative;top:-3px; right: 5px;">Registreer</a>
</div>

<div ng-show="loggedin">
    <ul class="nav navbar-nav">
        <li class="drop">

            <a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">{{user.username}} <b class="caret"></b></a>
            <ul class="" style="z-index:99999999999;">
                <li><a href="javascript:void(0)">Some log-in only stuff</a></li>

            </ul>
        </li>
    </ul>
</div>

Now all of this works nicely when I log myself in, but when I refresh the page, it detects that I'm logged in, but my name just stays blank, since I guess that $rootScope.user is undefined.

Why is this, and how do I fix it?

Thanks.

Web storage stores strings and strings only. user is definitely not a string. You should not guess the value of user but check it. — a better oliver
– a better oliver, Commented Nov 7, 2015 at 12:24

djvs · Accepted Answer · 2015-11-06 23:36:11Z

2

I recommend you switch to something like ngStorage instead: https://github.com/gsklee/ngStorage

$window.sessionStorage will not persist across new tabs or windows, and depending on your browser, may not even across a page refresh. So at least, you should be using localStorage (which doesn't have to be called as as a method of $window/window unless you expect it to be overrided in your scope, btw).

Also, typically, getter and setter methods on sessionStorage are used (getItem and setItem): https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage - you may not be able to use that object["key"] syntax to achieve that desired effect, although I believe they can.

answered Nov 6, 2015 at 23:36

djvs

5522 silver badges11 bronze badges

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

Comments

jrkt · Accepted Answer · 2015-11-15 01:22:46Z

2

I wrote a much cleaner object to store data in Local Storage.

  var LocalStorageManager = {
    setValue: function(key, value) {
        window.localStorage.setItem(key, JSON.stringify(value));
    },
    getValue: function(key) {
        try {
            return JSON.parse(window.localStorage.getItem(key));
        } catch (e) {

        }
    }
};

To save data to local storage:

LocalStorageManager.setValue("key",data);

To retrieve that data:

LocalStorageManager.getValue("key");

answered Nov 15, 2015 at 1:22

jrkt

2,7857 gold badges35 silver badges55 bronze badges

Collectives™ on Stack Overflow

AngularJs save user data into session after authentication

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