如何基于是否有人使用AngularJS登录和隐藏导航栏元素？
[英]How to hide and show nav bar elements based on if someone is logged in using AngularJS?
问题描述
I am using facebook authentication for my angular app. 
我正在为我的角度应用程序使用Facebook身份验证。 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 的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>
3 个解决方案
解决方案1
0 2016-12-20 17:44:28
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 假设您具有某种值，无论用户是否登录，该值都会更改，因此可以使用ngShow： https ://docs.angularjs.org/api/ng/directive/ngShow
<li ng-show="//someTest">
//sub content only show if test evaluates to true
</li>
解决方案2
0 已采纳 2016-12-20 18:24:35
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. 如果没有看到您的注销功能，我会说您可以检查cookie是否为null，然后使用ng-if跳过呈现li链接。 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. 您可以使用ng-show来切换“ display：none” css属性，但是在这种情况下，我认为您根本不需要DOM的那部分。 For more on ng-show/ng-if: When to favor ng-if vs. ng-show/ng-hide? 有关ng-show / ng-if的更多信息： 什么时候赞成ng-if和ng-show / ng-hide？ and http://www.codelord.net/2015/07/28/angular-performance-ng-show-vs-ng-if/ 和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 然后，您的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>
解决方案3
0 2016-12-20 19:10:18
您应该正确阅读ng-
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.