CODEWITHSUNDEEP
javascripthtmlangularjsnode.jssingle-page-application
Nivas Dhina
Nivas Dhina

Reputation: 149

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.

Upvotes: 0

Views: 396

Answers (2)

Code Guru
Code Guru

Reputation: 15598

You can use local storage for client-related tasks.

Here is you service

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");
    $cookieStore.put("ISLOGGEDIN", false);
    $http.post('/logout');
};
});

controller

app.controler('myController',function($scope){
   $scope.isLoggedIn= localStorage["ISLOGGEDIN"];
})

Upvotes: 0

Dinesh Shah
Dinesh Shah

Reputation: 1233

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.

Upvotes: 1

Related Questions