我正在为我的 Angular 应用程序使用 Facebook 身份验证。当用户登录时，我想隐藏登录链接并显示我的提要和注销链接。当用户注销时，我想显示登录链接并隐藏注销和我的提要链接。任何想法将不胜感激。
Controller
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>
最佳答案
如果没有看到您的注销功能，我想说您可以检查 cookie 是否为空，然后使用 ng-if 跳过渲染 li 链接。您可以使用 ng-show 来切换“display:none”css 属性，但在这种情况下，我认为您根本不需要 DOM 的该部分。 有关 ng-show/ng-if 的更多信息:When to favor ng-if vs. ng-show/ng-hide?和 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>
关于javascript - 如何根据某人是否使用 AngularJS 登录来隐藏和显示导航栏元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41248251/