In my web application, I have an app variable associated with the module myApp. There are 3 pages: /login, /registration, and /. The behavior of $routeChangeStart is defined as follows:
- First, it checks if a global variable
useris defined. If yes, it moves to step4. - If the user wants to go anywhere other than
/loginor/registration, it prevents default behavior usingevent.preventDefault(). It then checks for a valid session via cookie authorization. If authorized, it sets theuserglobal variable and redirects the user to their desired page. If not authorized, it directs them to the/loginpage. - If the user intends to visit
/loginor/registration, no action is taken in the scenario where there is no user variable and they wish to log in or register. - If the user wants to access
/loginor/registration, it prevents default behavior withevent.preventDefault()and instead redirects them to the home/page since the user already has a valid active session.
The logic seems to be functioning correctly, except when pressing F5 on the / page with a valid session cookie. In this case, the application fails to redirect to the correct template, resulting in a blank page. Interestingly, inserting anything other than / in the URL (e.g., /blah) resolves the issue.
Below is my app.js configuration:
(function () {
angular.module("myApp", ["controllers", "services", "directives", "ngRoute"])
.config(["$httpProvider", "$routeProvider", function ($httpProvider, $routeProvider) {
$httpProvider.defaults.withCredentials = true;
$httpProvider.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';
$routeProvider
.when("/login", {
controller: "LoginController",
templateUrl: "app/partials/login.html"
})
.when("/registration", {
controller: "RegistrationController",
templateUrl: "app/partials/registration.html"
})
.when("/", {
controller: "MainController",
templateUrl: "app/partials/home.html"
})
.otherwise("/");
}])
.run(function ($rootScope, $location, $http) {
$rootScope.$on('$routeChangeStart', function (event, next, current) {
if (!$rootScope.user) {
if (next && next.$$route && (next.$$route.originalPath !== "/login" && next.$$route.originalPath !== "/registration")) {
event.preventDefault();
$http.get("http://localhost:8080/myapp/api/user?self=true")
.success(function (data) {
$rootScope.user = data;
$location.path(next.$$route.originalPath);
})
.error(function () {
$location.path("/login");
});
}
}else{
if (next && next.$$route && (next.$$route.originalPath === "/login" || next.$$route.originalPath === "/registration")){
event.preventDefault();
$location.path("/");
}
}
});
});
angular.module("controllers", []);
angular.module("services", []);
angular.module("directives", [])
})();
Why does the
$location.path(next.$$route.originalPath);.success() AJAX call fail to work correctly? Note that replacing it with something like $location.path("/blah"); results in correct redirection, but even $location.path("/"); doesn't resolve the issue.