I am relatively new to AngularJS and I am experiencing difficulties in displaying the userInfo in my navbar and showing the Logout button only when I am logged in.
1)
Currently, I am using ng-show to show the Logout button only when I am logged in, but the button appears in all scenarios.
2)
I am struggling to bind the userInfo received from the 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 suspect that there may be an issue with the binding between the view, controller, or service, but I am having trouble identifying the exact problem. Does anyone have any suggestions or ideas on how to resolve this? Thanks!