Angular : displaying elements in navbar after logged in

Question

I am fairly new to AngularJS and I am facing issues while trying to show the userInfo in my navbar and the Logout button but only once I'm logged in.

1)

I am using ng-show to display the Logout button only when I'm logged in but this button appears in all cases.

2)

I can't bind the userInfo coming from authentication service i created.

Navbar directive:

'use strict';

angular.module('clientApp')
  .directive('navbar', function() {
    return {
      restrict: 'E',
      templateUrl: 'views/shared/navbar.html',
      controller: 'NavigationCtrl'
    };
});

Navigation Controller:

'use strict';

angular.module('clientApp')
 .controller('NavigationCtrl', function ($scope, $location, authentication) {
   $scope.isActive = function(path) {
     return path === $location.path();
   };

   $scope.isLoggedIn = function() {
     return authentication.isLoggedIn;
   };

   $scope.userInfo = function() {
     return authentication.getUserInfo.firstname;
   };
});

Authentication Service:

'use strict';

angular.module('clientApp').factory('authentication', function($http, $q, 
$window, $location, ENV) {
var userInfo;

function init() {
  if ($window.sessionStorage.userInfo) {
    userInfo = JSON.parse($window.sessionStorage.userInfo);
  }
}
init();

function getUserInfo() {
  return userInfo;
}

function isLoggedIn() {
  return ($window.sessionStorage.userInfo) ? true : false;
}

isLoggedIn();

function login(user) {
  var deferred = $q.defer();

  $http.post(ENV.apiEndpoint + 'recruiters/auth', {
    email: user.email,
    password: user.password
  }).then(function(result) {
    userInfo = {
      appToken: result.data['app_token'],
      firstname: result.data['first_name']
    };
    $window.sessionStorage.userInfo = JSON.stringify(userInfo);
    deferred.resolve(userInfo);
    $location.path('/');
    $http.defaults.headers.common['Authorization'] = 'Oauth ' +
    userInfo.appToken;
  }, function(error) {
    deferred.reject(error);
  });

  return deferred.promise;
  }

  return {
    login: login,
    getUserInfo: getUserInfo
  };


});

Navabar.html:

<div class="header">
<div class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#js-navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <a class="navbar-brand" href="#/">KDZ</a>
  </div>

  <div class="collapse navbar-collapse" id="js-navbar-collapse">

    <ul class="nav navbar-nav">
      <li ng-class="{active:isActive('/')}"><a href="#/">Home</a></li>
      <li ng-class="{active:isActive('/postings')}"><a ng-href="#/postings">Postings</a></li>
      <li ng-class="{active:isActive('/signup')}"><a ng-href="#/signup">Sign Up</a></li>
      <li ng-show="isLoggedIn">Logged as {{userInfo}}</a></li>
      <li ng-show="isLoggedIn"><a ng-href="#/logout"></a>Logout</li>
    </ul>
  </div>
</div>

I think the binding between the view and the controller or the service is wrong but I can't figure out how to do it properly. Does anyone have an idea ? Thanks !

Answer 1

1) Your isLoggedIn is a function, and a function evaluates to truthy, hence the li is showed. Use it like ng-show="isLoggedIn()" instead. This is also true for your controller function in the return authentication.isLoggedIn; part

2) Your getUserInfo also is a function, so use it like:

$scope.userInfo = function() {
    var userInfo = authentication.getUserInfo(); // see the () here
    if (userInfo && userInfo.firstname)
        return userInfo.firstname;

    return 'unknown person';
};

And last but not least, your 'authentication' service doesn't even have a function 'isLoggedIn'. Change your return value of the service to this:

return {
    login: login,
    getUserInfo: getUserInfo,
    isLoggedIn: isLoggedIn
};