Steffi Steffi - 1 month ago 16
Javascript Question

How to store user session in Angular?

I have just started using AngularJS and I'm trying to store user session on my AngularApp.

First step to submit username and password works.
After that, I store the

username
retrieved from the service in the
$rootScope
.
The next page can display the
username
stored.

But after a refresh, the
$rootScope
is empty.

I'm trying to do an authentication system as simple as possible.

myApp.controller('loginController', ['$scope', '$rootScope', '$location', 'AuthService', '$route',
function ($scope, $rootScope, $location, AuthService, $route) {

$scope.login = function (credentials) {
AuthService.login(credentials).then(function (response) {
if(response.data == "0"){
alert("Identifiant ou mot de passe incorrect");
}
else {
// response.data is the JSON below
$rootScope.credentials = response.data;
$location.path("/");
}
});
};

}]);


AuthService.login()
makes a
$http
request.

JSON

{user_id: 1, user_name: "u1", user_display_name: "Steffi"}


HTML :

<div>Welcome {{ credentials.user_display_name }}!</div>


I tried a lot of tutorials, but I can't make session work.
I already used UserApp but it's not ok to me. I would like to create my own simple authentication.

Answer

$rootScope will always reset when the page refreshes, since it's a single-page app.

You need to use something that persists client-side, such as a cookie or sessionStorage (as they both have an expiration time). Take a look at the documentation for $cookieStore: https://docs.angularjs.org/api/ngCookies/service/$cookieStore

Remember, sensitive session information should be encrypted.