如何根据是否有人使用 AngularJS 登录来隐藏和显示导航栏元素？

Question

我正在为我的 angular 应用程序使用 Facebook 身份验证。当用户登录时，我想隐藏登录 link 并显示我的提要和注销 link。当用户注销时，我想显示登录 link 并隐藏注销和我的提要 link。任何想法将不胜感激。

控制器

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;

}]);

路线

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>

Answer 1

假设您有某种值会随着用户是否登录而改变，您可以使用 ngShow：https://docs.angularjs.org/api/ng/directive/ngShow

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

Answer 2

在没有看到注销功能的情况下，我会说您可以检查 cookie 是否为空，然后使用 ng-if 跳过呈现 li link。您可以使用 ng-show 来切换 "display:none" css 属性，但在这种情况下，我认为您根本不需要 DOM 的那部分。有关 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/

这是我的建议

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

那么，你的 HTML 看起来像

   <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>

Answer 3

你应该正确阅读 ng-if

如何根据是否有人使用 AngularJS 登录来隐藏和显示导航栏元素？

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

javascript

html

css

angularjs

facebook-sdk-4.0