如何根据某人是不是使用 AngularJS 登录来隐藏和显示导航栏元素？
Posted
技术标签:
【中文标题】如何根据某人是不是使用 AngularJS 登录来隐藏和显示导航栏元素？【英文标题】：How to hide and show nav bar elements based on if someone is logged in using AngularJS?如何根据某人是否使用 AngularJS 登录来隐藏和显示导航栏元素？ 【发布时间】：2016-12-20 17:41:06 【问题描述】：我正在为我的 Angular 应用程序使用 facebook 身份验证。当用户登录时，我想隐藏登录链接并显示我的提要和注销链接。当用户注销时，我想显示登录链接并隐藏注销和我的提要链接。任何想法将不胜感激。
控制器
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>
【问题讨论】：
您的代码目前有哪些困难？ 【参考方案1】：如果没有看到您的注销功能，我会说您可以检查 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>
【讨论】：
谢谢，这很有帮助。它几乎可以工作了。当我登录时，我必须刷新页面才能删除登录并创建注销。做点好事
探索 登录 我的 Feed 注销 app.controller('mainController', ["$rootScope","$scope", "$location", "authFact", "$cookies", function($rootScope, $scope, $位置，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; ]); 哦。然后你可能想在登录函数的末尾添加 javascript 代码，在 if (response.authResponse) 的末尾，只需添加我上面写的 javascript 代码。事实上，您可能甚至不需要进行任何其他检查，只需将 $scope.IsAuthenticated 设置为 true。【参考方案2】：假设您有某种值会在用户登录或未登录时发生变化，您可以使用 ngShow：https://docs.angularjs.org/api/ng/directive/ngShow
<li ng-show="//someTest">
//sub content only show if test evaluates to true
</li>
【讨论】：
【参考方案3】：你应该正确阅读 ng-if
【讨论】：
以上是关于如何根据某人是不是使用 AngularJS 登录来隐藏和显示导航栏元素？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Angularjs 中使用 3rd 方登录来处理身份验证
如何获取登录用户 SpringSecurity + AngularJS 的用户信息
Google 登录 API - 如何使用 PHP 注销某人？
Rails 3 using Devise：如何允许某人使用他们的 Facebook 帐户登录？
如何添加一种方法来检查某人是不是已经在部落中/或者他们是不是是 Discord 中的部落所有者 - Discord.JS