how to block users that are not authenticated from specific pages? - angularjs

Question

i want to implement an authentication/authorization system in angularjs, i found a couple of tutorials, and a lot of them using $routeChangeStart event and testing for a specific pages, and then ask a service to test if this user is authenticated by sending the token to the api.
and that's what i have done, but i didn't get the results that i need.
app.js
var app = angular.module("KhbyraApp", ['ngRoute', 'ngCookies']);
app.config(function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider
.when("/Register", {
controller: "RegisterController",
templateUrl: "/app/views/register.html",
authenticate : false
})
.when("/Login", {
controller: "LoginController",
templateUrl: "app/views/login.html",
authenticate: false,
})
.when("/Articles", {
controller: "ArticlesController",
templateUrl: "app/views/article.html",
authenticate: true
})
.otherwise({ redirectTo: '/Login' });
$locationProvider.html5Mode(true);
});
app.run(function ($rootScope, $location, $cookieStore, AuthService) {
$rootScope.$on("$routeChangeStart", function (event, next, current) {
if (next.authenticate) {
if (!AuthService.isAuthenticated()) {
$location.url("/Login");
};
};
});
AuthService.js
app.factory('AuthService', function ($http, $q, $window, $cookieStore) {
var factory = {};
var loginUrl = 'http://localhost:2399/Token';
var authUrl = 'http://localhost:2399/Authenticate';
var email;
var token;
factory.Authenticate = function (email, password) {
console.log("AuthService -" + email);
var deferred = $q.defer();
var user = {
email: window.btoa(email),
password: window.btoa(password)
};
$http({
method: 'POST',
url: loginUrl,
data: user
}).success(function (data) {
console.log("AuthService - " + data);
token = data.replace('"', '').replace('"', '');
email = user.email;
deferred.resolve(token);
$cookieStore.put('token', token);
$cookieStore.put('email',user.email);
}).error(function () {
deferred.reject();
});
return deferred.promise;
};
factory.Email = email;
factory.Token = token;
factory.isAuthenticated = function () {
var request = $http({
method: 'GET',
url: authUrl,
headers: { 'Authorization': 'Token '+ $cookieStore.get('email') + ":"+ $cookieStore.get('token') }
}).then(function () {
return true;
}
,function () {
return false;
});
};
return factory;
});
the problem here is in the routeChangeStart even if the AuthService.isAuthenticated() returns true, in the if statements something goes wrong, i think it's about $http returns a promise.

Answer 1

It's normal that the route is loaded even if you're condition fails : Angular doesn't rollback and go back to the previous page. The RouteChangeStart event is actually called just after the URL is changed, when angular detects it.. but the redirection has already been made (there is actually no BeforeRouteChange event)
So you'll have to handle it yourself depending on your needs. For example, in this case, you'll typically force a redirection to the login page. YOu could also display a login popup on top of your page and wait for the login to be successfull to re-execute the previously failed request (which should now works because you're are now logged again). This behavior is exaclty the one of the http-auth-interceptor.
See also angular-app which implements something similar (based on http-auth-interceptor also)