我是一名新手,正在学习AngularJS并尝试处理用户身份验证。
我确保未连接的用户无法访问受限路由:
app.js
.config(function ($routeProvider) {
$routeProvider
.when('/myroute', {
templateUrl: 'views/myroute.html',
controller: 'MyrouteCtrl',
access: {
isFreeAccess: false
}
})
...
.run( function ($rootScope, $location, Auth) {
$rootScope.$on('$routeChangeStart', function(currRoute, prevRoute){
if (prevRoute.access != undefined) {
// if route requires auth and user is not logged in
if (!prevRoute.access.isFreeAccess && !Auth.isLogged) {
// redirects to index
$location.path('/');
}
}
AuthService.js
.factory('Auth', function () {
var user;
return{
setUser : function(aUser){
user = aUser;
},
isLoggedIn : function(){
return(user)? user : false;
}
}
});
login.js
$scope.login = function(user) {
$http({
url: ***,
method: "POST",
data: user,
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
$scope.persons = data;
Auth.setUser(data); //Update the state of the user in the app
$location.path("/");
}).error(function (data, status, headers, config) {
$scope.status = status;
});
用户状态在连接时被存储。现在我想在导航栏中显示新项目。
index.html
<div ng-include src="'views/navbar.html'"></div>
navbar.js
.controller('NavbarCtrl', function ($scope) {
$scope.items = [
{'name': 'Home', "needAuthentication": false},
{'name': 'About', "needAuthentication": false},
{'name': 'Settings', "needAuthentication": true},
{'name': 'Logout', "needAuthentication": true}
];
});
navbar.html
<div ng-controller="NavbarCtrl" class="collapse navbar-collapse navbar-ex1-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li ng-repeat="item in items ">
<a ng-if="item.needAuthentication == false || (item.needAuthentication == true && Auth.isLoggedIn())" href="#{{item.name}}">{{item.name}}</a>
</li>
</ul>
</div>
当用户启动应用程序时:
1)他还没有连接
ng-if="item.needAuthentication == false || (item.needAuthentication == true && Auth.isLoggedIn ())"
显示“主页”和“关于”菜单项。
2)然后他连接到应用程序,但导航栏未重新渲染以显示其他菜单项(“设置”和“注销”)。
正确的方法是什么?使用指令/将其绑定到模型/还是其他方式?
提前致谢。
.controller('NavbarCtrl', function ($scope, Auth)
,并尝试使用Auth.isLogged()
。 - M22an$scope.condition = function(item) { return item.needAuthentication == false || (item.needAuthentication == true && Auth.isLoggedIn()); };
。这样做可以完成任务,但我不知道为什么当我直接在我的视图的ng-if指令中放置“Auth.isLoggedIn()”条件时它不起作用(即使我在控制器中实例化了Auth)。谢谢您的帮助! - isy