javascript - why can't I load mydomain.com/public url directly? -
note: added apache , spring tags because user commented below thinks apache , spring issue.
i learning angularjs reading tutorials , experimenting sample apps. code below allows person type in mydomain.com , click around public links without being authenticated. however, whenever, type in mydomain.com/public1 directly in browser, browser responds popup window requesting username , password interpreted on server. angularjs app making decision force authentication calls server instead of letting unauthenticated users view public routes. not acceptable behavior. what can fix code below mydomain.com/public1 (or public url) can accessed directly typing url in browser?
here route provider in 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 home page , login/logout path // respectively auth.init('/login', '/logout'); }); here auth.js module injected route provider shown above:
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; }); here navigation.js, calls auth module:
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 is:
<!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> also, app run on apache http, calls spring boot app has own internal instance of tomcat. virtualhost code apache is:
<virtualhost www.mydomain.com:80> servername www.mydomain.com serveralias mydomain.com proxyrequests off proxypass / http://localhost:9000/ proxypassreverse / http://localhost:9000/ </virtualhost> if interested sample app came from, following link has complete code starting point: https://spring.io/guides/tutorials/spring-security-and-angular-js/
note changes have been made code link.
Comments
Post a Comment