AngularJs, change menu item whether user is connected or not

Question

I am new to AngularJS and I try to deal with user authentication.

I ensure non connected user can't access restricted route :

app.js

  .config(function ($routeProvider) {
    $routeProvider
        .when('/myroute', {
          templateUrl: 'views/myroute.html',
          controller: 'MyrouteCtrl',
            access: {
                isFreeAccess: false
            }
        })
 ...
 .run( function ($rootScope, $location, Auth) {

    $rootScope.$on('$routeChangeStart', function(currRoute, prevRoute){

        if (prevRoute.access != undefined) {
            // if route requires auth and user is not logged in
            if (!prevRoute.access.isFreeAccess && !Auth.isLogged) {
                // redirects to index
                $location.path('/');
            }
        }

AuthService.js

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

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

login.js

$scope.login = function(user) {

    $http({
        url: ***,
        method: "POST",
        data: user,
        headers: {'Content-Type': 'application/json'}
    }).success(function (data, status, headers, config) {
            $scope.persons = data;

            Auth.setUser(data); //Update the state of the user in the app

            $location.path("/");
    }).error(function (data, status, headers, config) {
        $scope.status = status;
    });

User state is stored when he's connected. Now I would like to display new items in the navbar.

index.html

<div ng-include src="'views/navbar.html'"></div>

navbar.js

.controller('NavbarCtrl', function ($scope) {
    $scope.items = [
        {'name': 'Home', "needAuthentication": false},
        {'name': 'About', "needAuthentication": false},
        {'name': 'Settings', "needAuthentication": true},
        {'name': 'Logout', "needAuthentication": true}
    ];
});

navbar.html

<div ng-controller="NavbarCtrl" class="collapse navbar-collapse navbar-ex1-collapse" role="navigation">
        <ul class="nav navbar-nav navbar-right">
            <li ng-repeat="item in items ">
               <a ng-if="item.needAuthentication == false || (item.needAuthentication == true && Auth.isLoggedIn())" href="#{{item.name}}">{{item.name}}</a> 
            </li>
        </ul>
    </div>

When user launches the app :

1) He is not connected yet

ng-if="item.needAuthentication == false || (item.needAuthentication == true && Auth.isLoggedIn ())"

'Home' and 'About' items are displayed.

2) Then he connects to the app, but the navbar is not rerendered with other items ('Settings' and 'logout').

What is the proper way to achieve that ? To use a directive / bind it to a model / or something else ?

thx in advance

Answer 1

I think the isLoogged function should return true when user is defined

try changing

return(user)? user : false;

to

return(user)? true : false;