Nivas Dhina Nivas Dhina - 3 months ago 17
Node.js Question

What is happening in page refresh in angular why is my logged user is not recogonized

I am building a SPA in angular js and node js combo. I have written two divs in a single HTML and choose which one to show when the conditions are satisfying. I use

ng-if
for checking condition. But my problem is the value of the model used in ng-if changes in each refresh. How can I make it constant?

What is the main practice to maintain sessions in SPA?

I have implemented controller function to verify whether the user is authenticated or not.

I have used this function to fetch the status of the user from express-node server.

I tried two ways WAY 1

var checkLoggedin = function ($q, $timeout, $http, $location, $rootScope) {
var deferred = $q.defer();

$http.get('/loggedin').success(function (user) {
if (user !== '0')
/*$timeout(deferred.resolve, 0);*/
deferred.resolve();

// Not Authenticated
else {
$rootScope.message = 'You need to log in.';
//$timeout(function(){deferred.reject();}, 0);
deferred.reject();
$location.url('/login');
}
});

return deferred.promise;
};


Index.html page

<div ng-controller="MainController" ng-init="init()">
<div ng-if="!checkLoggedin">
<!-- Should include MAININDEX.HTML here.........--->
<div ng-include="'templates/mainindex.html'"></div>

</div>

<div ng-if="checkLoggedin">
<!-- Should include MAINLOGGEDIN.HTML here.........--->
<div ng-include="'templates/mainloggedin.html'"></div>

</div></div>


I have a login page in the mainindex.html so I when I logged in it hits the server and creates the req.user from passport and automatically the modal value is changed and cases changed automatically. But it is now working when I click refresh button the first div is shown again. I don't know why it is happening so.

Way 2: I created a cookie variable with a value isLoggedIn to be populated with true or false So that in ng-if statement works accordingly.

But I get an error in this scenario. I am sure of why I get this error.

jquery.min.js:1 Uncaught Error: TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.


UserServices.login($scope.user, function (data) {

console.log("In controller:");
console.log(data);
$rootScope.isLoggedIn = "true";
$cookieStore.put("ISLOGGEDIN", true);
$scope.username = data.username;
});


This is my controller function and it is executed when the button on the first div clicked.

I have created an app.run function

App.run(function ($rootScope, $http, $cookies) {



// Logout function is available in any pages
$rootScope.logout = function ($cookieStore) {
console.log("init test");
$cookieStore.put("ISLOGGEDIN", false);
$http.post('/logout');
};
});


In my maincontroller which loads in almost all pages has statement

var isLoggedIn= $cookieStore.get("ISLOGGEDIN")


I hope this sets the isloggedin model

I am confused and both works in the same way it works rightly in the first attempt and when refreshed it's not working but the session is maintained the
user
object is logged in the console. What is the mechanism happening in angular when the page gets refreshed.

Answer

You can use sessionstorage or localstorage for this purpose.

update your code as follow

login function :

UserServices.login($scope.user, function (data) {

    console.log("In controller:");
    console.log(data);
    $rootScope.isLoggedIn = "true";
    localStorage.ISLOGGEDIN = true;
    $scope.username = data.username;
});

App run method

App.run(function ($rootScope, $http, $cookies) {



// Logout function is available in any pages
  $rootScope.logout = function ($cookieStore) {
  console.log("init test");
  localStorage.ISLOGGEDIN = false;
  $http.post('/logout');
};
});

controller :

var isLoggedIn= localStorage.ISLOGGEDIN; 

i used localStorage , but you can also use sessionStorage , for delete variables you can use removeItem method of localStorage.