我一直在努力解决同样的问题。我发布了这个问题。答案提供了一些启示。然后我能够强制用户登录,然后他们才能访问导航栏上的其他链接。然后我遇到了导航栏在登录屏幕上可见的问题。所以我创建了一个解决方法:
1)我拆分页面:默认情况下使用ng-include
我能够加载login.html
。login.html
并且index.html
没有ng-view
。
2)一旦用户通过身份验证,ng-view
必须包括在内,以便导航所需的所有视图都可以工作
索引.html
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="AppCtrl">
<div ng-include="template.url"></div>
</body>
</html>
登录.html
<h1>Login Page</h1>
<form ng-submit="login(username, password)">
<label>User name</label>
<input type="text" ng-model="username" class="ng-pristine ng-valid">
<label>Password</label>
<input type="password" ng-model="password" class="ng-pristine ng-valid">
<br/>
{{loginError}} {{loggedUser}}
<br/><br/>
<button class="btn btn-success" ng-click="">Submit</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</form>
然后,如果身份验证通过,我会更改模板 ( ng-include
) 并制作home.html
默认页面
app.controller('AppCtrl', function($scope, authentication) {
$scope.templates =
[
{ url: 'login.html' },
{ url: 'home.html' }
];
$scope.template = $scope.templates[0];
$scope.login = function (username, password) {
if ( username === 'admin' && password === '1234') {
authentication.isAuthenticated = true;
$scope.template = $scope.templates[1];
$scope.user = username;
} else {
$scope.loginError = "Invalid username/password combination";
};
};
};
Home.html 具有ng-view
通常的功能,并且用户可以访问其他页面。
这是我到目前为止所拥有的,这是一个工作示例,希望对您有所帮助。