How do I limited access to authenticated users? - angularjs

Question

I put together the following controller/service in Angularjs to contact an authentication service. I want to leverage this to restrict other pages of the Angular application to users who have authenticated via this service, but I am not sure how to do that. I am hoping someone can point me in the right direction. Below is my controller and service.
angular.module('App').controller('LoginController', function ($scope, $rootScope, $window, AuthenticationService) {
//function that gets called when the form is submitted.
$scope.submit = function () {
var promise = AuthenticationService.login($scope.user, $scope.password);
promise.then(function () {
var success = AuthenticationService.isAuthenticated();
if (success === true) {
$window.location.href = "/welcome.html";
}
});
}
});
app.service('AuthenticationService', function ($http) {
//Used to track if the user was able to successfully authenticate.
var auth = false;
var token = undefined;
//Had to put this in because I am running into weird behavior when attempting to retrieve a value from response.headers('value');.
//When assiging this to a var, it would always come out as a null value. If you send the value into a function without assigning
//it to a var, the value would be there as expected. For instance, console.log(response.headers('Authorization')); would work, but
//token = response.headers('A‌​uthorization'); would result in a null value. The function below is a workaround.
var getResponseHeader = function (x) { return x; }
//Makes a call to the WEB API Authentication service with the username/password and attempts to authenticate.
var login = function (user, pass) {
var input = { UserName: user, Password: pass };
return $http({
url: "/api/Authentication/Login/{credentials}",
method: "POST",
data: JSON.stringify(input),
dataType: "json"
}).then(function (response) {
if (response.status === 200) { //Call to the service was successful.
//This makes no sense. See comment for getResponseHeader function.
token = getResponseHeader(response.headers('Authorization'));
//If the authentication was successful, 'token' will have a value. If it was not successful, it will be null.
if (token) {
auth = true;
}
}
//There was an error when attempting to authenticate. Alert(response) is there for debugging purposes.
//This will be replaced with a user-friendly error message when completed.
}, function (response) {
alert(response);
});
}
//Logs the user out by removing the token and setting auth back to false
var logout = function (sessionid) {
auth = false;
token = undefined;
}
//Accessor for the 'auth' variable.
var isAuthenticated = function () { return auth; }
//Accessor for the token.
var getToken = function () { return token; }
return {
login: login,
logout: logout,
isAuthenticated: isAuthenticated,
token: getToken
};
});
The service/controller work to authenticate, however anyone can browse to 'welcome.html' or any other page in the application. How do I limit this to users who have successfully authenticated?

Answer 1

I would recommend to use angular-permissions
you set up your states like so:
.state('home', {
url: '/',
templateUrl: 'templates/home.html',
parent: 'parent',
data: {
permissions: { //section for permissions
only: 'isAuthorized', // only allow loged in users
redirectTo: 'login' // if not allowed redirect to login page
}
},
})
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
parent: 'login-parent',
data: {
permissions: {
only: 'anonymous',
redirectTo: 'home'
}
}
})
and set up two groups for authentification:
//A Group for not logged in users
.run(function(PermPermissionStore) {
PermPermissionStore
.definePermission('anonymous', function() {
// Do your authentification here
// you can sett up your funtions elsewere and call them here
// return true if unauthorized
var auth = auth_function()
if (auth === true) {
return false
} else { return true }
})
})
//group for authentificated users
.run(function(PermPermissionStore) {
PermPermissionStore
.definePermission('isAuthorized', function() {
// Do your authentification here
// return true if authorized
var auth = auth_function()
if (auth === true) {
return true
} else { return false }
})
})

Answer 2

On your root app js file run method check for auth value and redirect if not authenticated, the run method on your app.js is a good place to set this watch:
SEE FIDDLE EXAMPLE OF YOUR CODE
.run(['AuthenticationService', '$location', '$rootScope', function (AuthenticationService, $location, $rootScope) {
$rootScope.$watch(function () {
if (!AuthenticationService.isAuthenticated())
$location.path("/login");
return $location.path();
});
}])
This simple watch will check the auth value by calling your isAuthenticated method in the AuthenticationService, so you can be certain no unauthed user will access any page, you should change the logic by adding another condition to check the routes so to only limit access to specifyed pages.