authentication mechanism in angularjs - angularjs

Question

i am newbie in AngularJS, i have read a tutorial about login and authentication with angular js but i still confused in many points of my code, for now i have arrived to login and to store a token in browser's session, but i can't redirect to home page after loggin in,
here is myservice :
function authenticationSvc ($http, $q, $window, auth_uri) {
var userInfo;
function login(username, password) {
var deferred = $q.defer();
$http.post(auth_uri, {
username: username,
password: password
}).then(function(result) {
userInfo = {
accessToken: result.data.token
};
$window.sessionStorage["pallas_token"] = result.data.token;
deferred.resolve(userInfo);
},
function(error) {
deferred.reject(error);
});
return deferred.promise;
}
function getUserInfo() {
return userInfo;
}
return {
login: login,
getUserInfo: getUserInfo
};
};
and this is my state config
.state('dashboard', {
url:'/dashboard',
controller: 'HomeController',
templateUrl: 'partials/dashboard/main.html',
resolve:{
auth: function($q, authenticationSvc) {
var userInfo = authenticationSvc.getUserInfo();
if (userInfo) {
return $q.when(userInfo);
} else {
return $q.reject({ authenticated: false });
}
}
}
}
finally this my .run block:
angular
.module ( 'mainApp' )
.run ( function ( $rootScope, $state, $location) {
$rootScope.$on('$stateChangeSuccess', function( userInfo) {
console.log( userInfo );
});
$rootScope.$on('$stateChangeError', function(evt, toState, toParams, fromState, fromParams, error) {
if (error.authenticated == false) {
$state.transitionTo("login");
}
});
});
please help me to resolve this issue, i need help my friends :(
i am sorry for missing to post my login controller, there is:
function LoginController($scope, $state, authenticationSvc){
$scope.submit = function(credentials){
authenticationSvc.login(credentials.username, credentials.password);
};
};

Answer 1

Your login method return a success promise when the user pass the authentication. So.. you can edit your controller in this way:
function LoginController($scope, $state, authenticationSvc){
$scope.submit = function(credentials){
authenticationSvc.login(credentials.username, credentials.password).then(function(){
$state.go('dashboard');
console.log('User logged in!');
}).catch(function(){
console.log('User NOT logged in!');
});
};
};
UPDATE
To maintain the state after a page refresh you need to restore the userInfo object from sessionStorage. I also added the logout logic! Take a look:
function authenticationSvc ($http, $q, $window, auth_uri) {
var userInfo;
function login(username, password) {
...
}
function logout() {
$window.sessionStorage.removeItem("pallas_token");
userInfo = null;
}
function getUserInfo() {
return userInfo;
}
function init(){
if ($window.sessionStorage["pallas_token"]){
userInfo = {
accessToken: $window.sessionStorage["pallas_token"]
};
}
}
init();
return {
login: login,
logout: logout,
getUserInfo: getUserInfo
};
};
Logout:
function LoginController($scope, $state, authenticationSvc){
$scope.submit = function(credentials){
...
};
$scope.logout = function(){
authenticationSvc.logout();
$state.go('login');
console.log('User logged out!');
};
};
Enjoy!