Losing value when redirecting pages

Question

I have login form and when user enter valid username and password he is redirected to home page. I am keeping username and password in session, but when i go to home page and try to console.log geUser() function from sessionservice i am getting null....

You can see my code below.

App config

   (function () {

            'use strict';
            angular.module('chatApp', ['ui.router','ngAnimate','ui.bootstrap','ui.bootstrap.modal'])
                .config(function ($stateProvider, $urlRouterProvider) {

                    $urlRouterProvider.otherwise("/login");

                    $stateProvider
                        .state('login', {
                            url: '/login',
                            templateUrl: 'src/user/login/login.tpl.html',
                            controller: 'loginController'
                        })
                        .state('home', {
                            url: '/home',
                            templateUrl: 'src/home/home.tpl.html',
                            controller: 'homeController'

                        })
                });
        })();

Login Controller

/**
 * Created by user on 15.09.2015.
 */
(function () {
    'use strict';
    function LoginController($scope, loginService, redirectService,sessionService) {
        $scope.loginController = {};



        $scope.loginController.user = {

            username: '',
            password: ''
        };

        $scope.loginController.message = "";
        $scope.loginController.hasError = false;

        $scope.loginController.login = function () {
            var promise = loginService.login($scope.loginController.user);
            promise.then(function (data) {

                    sessionService.setUser(data);
                    redirectService.loginToHome();
                },
                function (data) {
                    $scope.loginController.message = "Username or password is incorrect";
                    $scope.loginController.hasError = true;
                });
        };

    }

    angular.module('chatApp').controller('loginController', LoginController);
})();

Login Template

<div class="modal-dialog">
    <div class="loginmodal-container">
        <h1>Login</h1><br>

        <form name="form" novalidate>
            <div class="input-group">
                <label for="user">Username </label>
                <input ng-model="loginController.user.username" id="user" name="user" type="text" class="form-control"
                       placeholder="Username = Bukic"
                       aria-describedby="basic-addon1" required/>
                <br/>

                <div ng-show="form.$submitted || form.user.$touched">
                    <div ng-show="form.user.$error.required">Username is required</div>
                </div>
            </div>
            <div class="input-group">
                <label for="pass">Password </label>
                <input ng-model="loginController.user.password" id="pass" name="pass" type="password"
                       class="form-control"
                       placeholder="Password = bukic"
                       aria-describedby="basic-addon1" required>
                <br/>

                <div ng-show="form.$submitted || form.pass.$touched">
                    <div ng-show="form.pass.$error.required">Password is required</div>
                </div>
            </div>
            <br/>
            <input type="submit" class="login loginmodal-submit" ng-click="loginController.login()"
                   ng-disabled="form.$invalid" name="login" value="Login">
        </form>
        <br/>

        <div class="alert alert-danger" ng-show="loginController.hasError">{{loginController.message}}</div>
    </div>
</div>

Login service

/**
 * Created by user on 15.09.2015.
 */
(function () {
    'use strict';
    angular.module('chatApp').factory('loginService', function ($q) {
        var service = {};
        service.login = function (user) {
            var deferred = $q.defer();

            if (user.username === 'Bukic' && user.password === 'bukic') {
                deferred.resolve(user);
            }
            else {
                deferred.reject({success: false});
            }

            return deferred.promise;
        };
        return service;
    });
})();

Session Service

/**
 * Created by user on 15.09.2015.
 */
(function () {
    'use strict';
    angular.module('chatApp').factory('sessionService', function () {
        var service = {};
        var user = null;
        service.getUser = function () {
            console.log(user.username);
            return user;
        };
        service.setUser = function (user) {
            this.user = user;
           // console.log(user);
        };
        service.isAuthenticated = function () {
            return this.user !== null;
        };
        return service;
    });
})();

Redirect Service

/**
 * Created by user on 15.09.2015.
 */
(function () {
    'use strict';
    angular.module('chatApp').factory('redirectService', function ($state) {
        var service = {};
        service.loginToHome = function () {

            $state.go('home',{reload:false});
        };

        service.loginToLogin = function(){
            $state.go('login');
        };
        return service;
    });
})();

Home Controller

(function () {

'use strict';
function HomeController($scope,redirectService,sessionService) {

    $scope.homeController = {};

    //$scope.homeController.checkuser = sessionService.getUser();
  //  console.log("Home Controller" + $scope.homeController.checkuser);


}


angular.module('chatApp').controller('homeController', HomeController);

})();

Answer 1

It should be return this.user in your get user function of sessionService instead of return user.

Otherwise you will get the console error: Uncaught ReferenceError: Uncaught ReferenceError: user is not defined

service.getUser = function () {
            console.log(user.username);
            return this.user;
        };

Answer 2

I would say that your service could look like this:

/**
 * Created by user on 15.09.2015.
 */
(function () {
    'use strict';
    angular.module('chatApp').factory('sessionService', function () {
        // define the variable user as property
        var service = {
           user: null
        };
        service.getUser = function () {
            //console.log(user.username);
            return this.user;
        };
        service.setUser = function (user) {
            this.user = user;
           // console.log(user);
        };
        service.isAuthenticated = function () {
            return this.user !== null;
        };
        return service;
    });
})();

getUser always return null because setUser never assigns a value to the variable user that is assigned a null value initially.