How to hide and show nav bar elements based on if someone is logged in using AngularJS?

Question

I am using facebook authentication for my angular app. When the user logs in I would like to hide the Login link and show the My Feed and Logout links. And when the user logs out I would like to show the Login link and hide the Logout and My Feed links. Any ideas would be much appreciated.

Controllers

app.controller('mainController', ["$rootScope","$scope", "$location", "authFact", "$cookies", function($rootScope, $scope, $location, authFact, $cookies) {
    $scope.FBlogout = function(){
    FB.getLoginStatus(function(response) {
    if (response && response.status === 'connected') {
        FB.logout(function(response) {
            $cookies.remove("userObj");
            $cookies.remove('accessToken');
            $location.path("/");
            $scope.$apply();
        });
        }
    });
};

}]);

app.controller('exploreController', function($scope, dataService) {
dataService.getPosts(function(response) { 
  console.log(response.data);  
   $scope.posts = response.data;
});
});

app.controller('loginController',["$rootScope", "$scope", "authFact", "$location", "$cookies", 
function($rootScope, $scope, authFact, $location, $cookies) {
$scope.name='Login please';
$scope.FBlogin = function(){
    FB.login(function(response) {
        if (response.authResponse) {
         console.log('Welcome!  Fetching your information.... ');
         FB.api('/me', function(response) {
           console.log('Good to see you, ' + response.name + '.');
           $cookies.put('userObj', response);

           var accessToken = FB.getAuthResponse().accessToken;
           console.log(accessToken);
           authFact.setAccessToken(accessToken);
           console.log(response);

           $location.path("/myFeed");
           $scope.$apply();

         });
        } else {
         console.log('User cancelled login or did not fully authorize.');
        }
    });

};
}]);

app.controller('feedController', ["$rootScope", "$scope", "$authFact", "$location", "$cookies", function($rootScope, $scope, authFact, $location, $cookies) {
var userObj = authFact.getUserObject();
$scope.name = userObj.name;

}]);

Routes

var app = angular.module("dsnApp", ["ngRoute", "ngCookies"]);

window.fbAsyncInit = function() {
FB.init({
appId      : '102479760252089',
xfbml      : true,
version    : 'v2.8'
 });
  FB.AppEvents.logPageView();
};

(function(d, s, id){
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) {return;}
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

// routes
app.config(function($routeProvider) {
$routeProvider

    // route for the home page
    .when('/', {
        templateUrl : 'templates/home.html',
        controller  : 'mainController'
    })
    // route for the about page
    .when('/explore', {
        templateUrl : 'templates/explore.html',
        controller  : 'exploreController'
    })

    // route for the service page
    .when('/login', {
        templateUrl : 'templates/login.html',
        controller  : 'loginController'
    })

     // route for the about page
    .when('/myFeed', {
        templateUrl : 'templates/myFeed.html',
        controller  : 'feedController',
        authenticated : true
    })

    .otherwise('/', {
        templateUrl : 'templates/home.html',
        controller  : 'mainController'
    });

});

app.run(["$rootScope", "$location", "authFact",
function($rootScope, $location, authFact){
    $rootScope.$on('$routeChangeStart', function(event, next, current){
        //if route is authenticated, then the user should access token
        if(next.$$route.authenticated){
            var userAuth = authFact.getAccessToken();
            if(!userAuth){
                $location.path('/login');
            }
        }
    });

   }]);

HTML

<body ng-controller="mainController">
  <div>
      <ul class="nav">
       <li id="home"><h1><a href="#/">Do Something Nice</a></h1></li>
       <li><a href="#explore">Explore</a></li>
       <li><a href="#login">Login</a></li>
       <li><a href="#myFeed">My Feed</a></li>
       <li id="logout" ng-click="FBlogout()">   <a>Logout</a></li>
    </ul>
  </div>
   <!-- this is where content will be injected -->
   <div id="main">

<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>

Which difficulties are you currently having with your code? – Antti Haapala -- Слава Україні Dec 20 '16 at 17:48 — Antti Haapala -- Слава Україні, Dec 20 '16 at 17:48

score 0 · Answer 1 · answered Dec 20 '16 at 17:44

0

Assuming you have some sort of value that changes if a user is logged in or not, you could use ngShow: https://docs.angularjs.org/api/ng/directive/ngShow

<li ng-show="//someTest">
     //sub content only show if test evaluates to true
</li>

answered Dec 20 '16 at 17:44

Thomas Juranek

343
2
16

score 0 · Accepted Answer · edited May 23 '17 at 12:08

0

Without seeing your logout function, i would say you could check to see if the cookie is null, then use ng-if to skip rendering the li link. You could use ng-show which will toggle the "display:none" css property, but in this case, i dont think you will need that part of the DOM at all. For more on ng-show/ng-if: When to favor ng-if vs. ng-show/ng-hide? and http://www.codelord.net/2015/07/28/angular-performance-ng-show-vs-ng-if/

Heres my suggestion

var C = $cookies.getObject("userObj");
$scope.IsAuthenticated = (C||null)==null?false:true;

then, your HTML would look like

   <div>
      <ul class="nav">
       <li id="home"><h1><a href="#/">Do Something Nice</a></h1></li>
       <li><a href="#explore">Explore</a></li>
       <li ng-if="!IsAuthenticated"><a href="#login">Login</a></li>
       <li><a href="#myFeed">My Feed</a></li>
       <li id="logout" ng-click="FBlogout()">   <a>Logout</a></li>
    </ul>
  </div>

edited May 23 '17 at 12:08

Community

1
1

answered Dec 20 '16 at 18:24

brhardwick

3,065
2
15
17

Thank you, this was very helpful. It is almost working. When I log in I have to refresh the page for the login to be removed and for the logout to be created. – Olivia Oddo Dec 21 '16 at 07:40
- Do Something Nice
- Explore
- Login
- My Feed
- Logout
– Olivia Oddo Dec 21 '16 at 07:42
app.controller('mainController', ["$rootScope","$scope", "$location", "authFact", "$cookies", function($rootScope, $scope, $location, authFact, $cookies) { $scope.FBlogout = function(){ $cookies.remove("userObj"); $cookies.remove('accessToken'); $location.path("/"); $scope.$apply(); }; var C = $cookies.get("userObj"); console.log(C); if(C == null){ $scope.out = false; $scope.in = true; $scope.feed = false; }else{ $scope.out=true; $scope.in = false; $scope.feed = true; } }]); – Olivia Oddo Dec 21 '16 at 07:43
Oh. Then you might want to add the Javascript code at the end of your login function, at the end of the if (response.authResponse), Just add the javascript code i wrote above. In fact, you probably wouldnt even need to do any of the other checking, just set the $scope.IsAuthenticated to true. – brhardwick Dec 21 '16 at 13:29

score 0 · Answer 3 · answered Dec 20 '16 at 19:10

0

You should read ng-if properly

answered Dec 20 '16 at 19:10

Akif Hussain Sayyed

576
4
12

How to hide and show nav bar elements based on if someone is logged in using AngularJS?

3 Answers3

Do Something Nice