Check login status on page reload in angularjs single page app

Question

I have a single page angularjs app in which whenever there is a change in route I check the login status of the user by a variable stored in a service(after submitting the login form to server) as per this solution AngularJS- Login and Authentication in each route and controller :

app.run(['$rootScope', '$location', 'Auth', function ($rootScope, $location, Auth) {
    $rootScope.$on('$routeChangeStart', function (event) {
    if (!Auth.isLoggedIn()) {
        console.log('DENY');
        event.preventDefault();
        $location.path('/login');
    }
    else {
        console.log('ALLOW');
        $location.path('/home');
    }
});}]);

//service

 .factory('Auth', function(){
var user;

return{
    setUser : function(aUser){
        user = aUser;
    },
    isLoggedIn : function(){
        return(user)? user : false;
    }
  }
})

The problem is when I reload the whole page(by the refresh button) the variable in the service is lost and user gets redirected to login page even when the user session is still on at the backend.

How can I still manage the variable in the service? I thought of using sessionStorage but does not sound secure enough.

Answer 1

Im my opinion you can choose from 2 ways:

• Persist the Data on the server-side via session
• Store your data in the localStorage or even better in the window.sessionStorage so a page reload doesn't affect your applicant

Answer 2

也许cookie可以解决您的问题

Answer 3

Try to store your data in $window.localStorage ( angular abstraction over javascript window.localStorage)

for example :

(function () {
angular.module('app').factory('UserIdentity', ['$window', function ($window) {

    this.UserName = function () {
        return $window.localStorage.getItem("username");
    };

    this.Token = function () {
        return $window.localStorage.getItem("token");
    };

    this.create = function (token, userName) {
        $window.localStorage.setItem("token", token);
        $window.localStorage.setItem("username", userName);
    };
    this.destroy = function () {
        $window.localStorage.removeItem("token");
        $window.localStorage.removeItem("username");
    };
    this.isAuthenticated = function () {
        var token = $window.localStorage.getItem("token");
        return !!token;
    }
    return this;
}]);

})();