注意：我添加了apache和spring标签，因为用户在下面评论说他认为这是一个apache和spring问题。
我正在通过阅读教程和试验示例应用来学习AngularJS。下面的代码允许用户输入mydomain.com然后单击公共链接而不进行身份验证。但是，无论何时，我直接在浏览器中输入mydomain.com/public1，浏览器都会响应一个弹出窗口，请求用户名和密码在服务器上进行解释。 AngularJS应用程序决定强制对服务器进行身份验证调用，而不是让未经身份验证的用户查看公共路由。这显然是不可接受的行为。 如何修复以下代码，以便通过在浏览器中输入网址直接访问mydomain.com/public1（或任何公共网址）？
以下是hello.js中的路由提供商：
angular
.module('hello', [ 'ngRoute', 'auth', 'home', 'message', 'public1', 'navigation' ])
.config(
function($routeProvider, $httpProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/', {
templateUrl : 'js/home/home.html',
controller : 'home'
}).when('/message', {
templateUrl : 'js/message/message.html',
controller : 'message'
}).when('/public1', {
templateUrl : 'js/public1/public1.html',
controller : 'public1'
}).when('/public2', {
templateUrl : 'js/public1/public2.html',
controller : 'public1'
}).when('/public3', {
templateUrl : 'js/public1/public3.html',
controller : 'public1'
}).when('/public4', {
templateUrl : 'js/public1/public4.html',
controller : 'public1'
}).when('/login', {
templateUrl : 'js/navigation/login.html',
controller : 'navigation'
}).otherwise('/');
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
}).run(function(auth) {
// Initialize auth module with the home page and login/logout path
// respectively
auth.init('/login', '/logout');
});
以下是注入上述路由提供程序的auth.js模块：
angular.module('auth', []).factory(
'auth',
function($rootScope, $http, $location) {
var auth = {
authenticated : false,
authenticatedPin : false,
loginPath : '/login',
logoutPath : '/logout',
homePath : '/checkpin',
path : $location.path(),
authenticate : function(credentials, callback) {
var headers = credentials && credentials.username ? {
authorization : "Basic " + btoa(credentials.username + ":" + credentials.password)
} : {};
$http.get('user', {
headers : headers
}).success(function(data) {
if (data.name) { auth.authenticated = true; }
else { auth.authenticated = false; }
callback && callback(auth.authenticated);
$location.path('/message');
}).error(function() {
auth.authenticated = false;
callback && callback(false);
});
},
clear : function() {
$location.path(auth.loginPath);
auth.authenticated = false;
$http.post(auth.logoutPath, {}).success(function() {
console.log("Logout succeeded");
}).error(function(data) {
console.log("Logout failed");
});
},
init : function(homePath, loginPath, logoutPath) {
auth.homePath = homePath;
auth.loginPath = loginPath;
auth.logoutPath = logoutPath;
auth.authenticate({}, function(authenticated) {
if (authenticated) {
$location.path(auth.path);
}
})
}
};
return auth;
});
以下是navigation.js，它调用auth模块：
angular.module('navigation', ['ngRoute', 'auth']).controller(
'navigation',
function($scope, $route, auth) {
$scope.credentials = {};
$scope.tab = function(route) {
return $route.current && route === $route.current.controller;
};
$scope.authenticated = function() {
return auth.authenticated;
}
$scope.login = function() {
auth.authenticate($scope.credentials, function(authenticated) {
if (authenticated) {
console.log("Login succeeded")
$scope.error = false;
} else {
console.log("Login failed")
$scope.error = true;
}
})
}
$scope.logout = auth.clear;
});
index.html是：
<!doctype html>
<html>
<head>
<title>Hello Angular</title>
<base href="/" />
<link href="css/angular-bootstrap.css" rel="stylesheet">
<style type="text/css">
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}ownChair31#
</style>
</head>
<body ng-app="hello" ng-cloak class="ng-cloak">
<div ng-controller="navigation" class="container">
<ul class="nav nav-pills" role="tablist">
<li ng-class="{active:tab('home')}"><a href="/">home</a></li>
<li ng-class="{active:tab('message')}"><a href="/message">message</a></li>
<li ng-class="{active:tab('public1')}"><a href="/public1">public1</a></li>
<li ng-class="{active:tab('public2')}"><a href="/public2">public2</a></li>
<li ng-class="{active:tab('public3')}"><a href="/public3">public3</a></li>
<li ng-class="{active:tab('public4')}"><a href="/public4">public4</a></li>
<li><a href="/login">login</a></li>
<li ng-show="authenticated()"><a href="" ng-click="logout()">logout</a></li>
</ul>
</div>
<div ng-view class="container"></div>
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/auth/auth.js" type="text/javascript"></script>
<script src="js/home/home.js" type="text/javascript"></script>
<script src="js/message/message.js" type="text/javascript"></script>
<script src="js/public1/public1.js" type="text/javascript"></script>
<script src="js/navigation/navigation.js" type="text/javascript"></script>
<script src="js/hello.js" type="text/javascript"></script>
</body>
</html>
此外，该应用程序在Apache http上运行，它调用一个具有自己的内部tomcat实例的spring启动应用程序。 Apache的VirtualHost代码是：
<VirtualHost www.mydomain.com:80>
ServerName www.mydomain.com
ServerAlias mydomain.com
ProxyRequests Off
ProxyPass / http://localhost:9000/
ProxyPassReverse / http://localhost:9000/
</VirtualHost>
如果您对此示例应用的来源感兴趣，以下链接包含起点的完整代码：https://spring.io/guides/tutorials/spring-security-and-angular-js/
请注意，已对链接中的代码进行了更改。