First time injection doesn't instantiate - angularjs

First time calling, the authenticated property is false, even the credential is OK. If I login once again with the same credential, it will be OK.
Anyway, I am not sure that my factory below is the right way in angularjs or not. Would you please give me any suggestions?
Factory:
app.factory('authenticatorService',['$resource', function($resource){
var authenticator = {};
authenticator.attempt = function(email, password){
var current = this;
$resource("/service/authentication/:id",null,{'update' : { method: 'PUT'}})
.save({'email' : email,'password': password},
//success
function(response){
current.authenticated = sessionStorage.authenticated = true;
current.userinfo = response.user;
current.authenticated = true;
},
function(response){
current.authenticated = false;
}
);
return this.authenticated;
};
authenticator.logout = function(){
delete sessionStorage.authenticated;
this.authenticated = false;
this.userinfo = null;
return true;
};
authenticator.check = function(){
if(this.userinfo && this.authenticated){
return true;
}
return false;
};
return authenticator;
}]);
Controller:
app.controller('authenCtrl',
[
'authenticatorService',
'$scope',
'$sanitize',
'$log',
'$location',
function(alert, authenticator, $scope, $sanitize, $log, $location){
$scope.login = function(){
if(authenticator.attempt($sanitize($scope.email) ,$sanitize($scope.password))){
$location.path('/dashboard');
}else{
alert.add("danger","Login fail.");
}
}
}]);

The this.authenticated in authenticator.attempt will return before the asynchronous call from $resource has completed.
You will need to wait for the promise to be resolved before returning from the factory, and before receiving in the controller.
Something like this should hopefully work:
Factory:
authenticator.attempt = function(email, password){
var current = this;
$resource("/service/authentication/:id", null, {'update' : { method: 'PUT'}})
.save({'email' : email,'password': password},
function(response){
current.authenticated = sessionStorage.authenticated = true;
current.userinfo = response.user;
current.authenticated = true;
},
function(response){
current.authenticated = false;
}
).$promise.then(function () {
return current.authenticated;
});
};
Controller:
$scope.login = function() {
var email = $sanitize($scope.email);
var password = $sanitize($scope.password);
authenticator.attempt(email, password).then(function(isAuthenticated) {
if (isAuthenticated) $location.path('/dashboard');
else alert.add("danger", "Login fail.");
});
};

Related

Losing authentication after refreshing the page (AngularJS, NodeJS)

So I have authentication for my web app. This is my authentication controller.
myTodoList.controller('authController', function($scope, $rootScope, $http, $location) {
$scope.user = { username: '', password: '' };
$scope.error_message = '';
$scope.login = function() {
$http.post('/auth/login', $scope.user).success(function(data) {
if (data.state == 'success') {
$rootScope.authenticated = true;
$rootScope.current_user = data.user.username;
$location.path('/app');
} else {
$scope.error_message = data.message;
}
});
};
$scope.register = function() {
$http.post('/auth/signup', $scope.user).success(function(data) {
if (data.state == 'success') {
$rootScope.authenticated = true;
$rootScope.current_user = data.user.username;
$location.path('/app');
} else {
$scope.error_message = data.message;
}
});
};
});
This works fine, I get my authentication after logging in or making a new registration. But After refreshing the page I lose my authentication. I think these lines generate the problem.
var myTodoList = angular.module("myTodoList", ['ngRoute', 'ngResource']).run(function($http, $rootScope) {
$rootScope.authenticated = false;
$rootScope.current_user = 'Guest';
$rootScope.signout = function() {
$http.get('auth/signout');
$rootScope.authenticated = false;
$rootScope.current_user = 'Guest';
};
});
At the top of my maincontroller.js I have this $rootScope.authenticated = false; line. This is needed I know but this could be the line that says it should be false instead of true after refreshing. What should I do to get around this problem?
Instead of storing the data on the rootScope, store it in the sessionStorage instead - this will persist across refreshes
https://github.com/gsklee/ngStorage

How to do automatic login in angular js?

i have a login screen and i am doing login by using some hard cord data.
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $rootScope, $window, $ionicModal, $timeout, authService, $state, $http, $ionicLoading, $location) {
//$window.location.reload();
$scope.loginSubmitted = false;
$scope.myflag = false;
$scope.User = {};
$scope.toast = function() {
$ionicLoading.show({
template: 'wrong credentials'
});
$timeout(function() {
$ionicLoading.hide();
}, 1000);
}
$scope.footerflag = true;
$scope.hidefooter = function() {
$timeout(function() {
$scope.footerflag = false;
},1)
}
$scope.showfooter = function() {
$timeout(function() {
$scope.footerflag = true;
},1)
}
$scope.doLogin = function() {
console.log("trying login");
// // var res = $http.post('http://login.com/postLogin', $scope.user);
// authService.postdetails($scope.User).success(function(data, status, headers, config) {
// $scope.message = data;
// console.log("succesfn");
// console.log(status);
//
// })
// .error(function(data, status, headers, config) {
// alert("failure message: " + JSON.stringify({
// data: data
// }));
// console.log(fail);
// });
$scope.loginSubmitted = true;
$scope.loginstatus = 0;
authService.GetByUsername().success(function(data) {
$scope.UserData = data;
// console.log($scope.UserData);
for (var i = 0; i < $scope.UserData.length; i++) {
if ($scope.UserData[i].UserName == $scope.User.UserName && $scope.UserData[i].Password == $scope.User.Password) {
authService.currentuser = $scope.User.UserName;
//console.log(authService.currentuser);
$scope.loginstatus = 1;
break;
}
}
if ($scope.loginstatus == 1) {
// var lastVal = $cookieStore.get($scope.User.UserName);
// console.log(lastVal);
//$location.path('/app/playlists');
$scope.loginstatus = 0;
$state.go('app.playlists', null, {
reload: true
});
} else {
console.log('wrong credentials');
$scope.toast();
}
}).error(function(err) {
console.log(err);
});
}
});
So i want to enable automatic login, till the user clicks logout button. How it can be done?
I'm simply redirecting to another page when username and password matches.
You can check if the user is logged in in the module.run() method. Here is an example:
http://arthur.gonigberg.com/2013/06/29/angularjs-role-based-auth/
It might help you.
Please following below links.
How to check authentication and automatically redirect to login state with ui-router?
angular js returning user autologin

Why UserLogin action does not raise in mvc 5

I have angular js file and I want to raise an action in the data controller but this code can not raise user login action please check this code and answer me
var app = angular.module('mymodule', []);
app.controller('mycont', function myfunc($scope) {
$scope.Message = "hello";
$scope.Islogin = false;
$scope.Submitted = false;
$scope.Isformvalid = false;
$scope.logindata = {
Username:'',
Password:''};
$scope.$watch('f1.$valid', function (newval) {
$scope.Isformvalid = newval;
});
$scope.Login = function () {
$scope.Submitted = true;
if ($scope.Isformvalid) {
LoginService.Getuser($scope.logindata).then(function (d) {
if (d.data.Username!=null) {
$scope.Islogin = true;
$scope.Message="Successfully Login"
}
else {alert("invalid");}
})
}
}
}).factory('LoginService', function ($http) {
var fac = {};
fac.Getuser = function (f) {
return $http({
url: '/Home/UserLogin',
method: 'post',
data: JSON.stringify(d),
headers: {'content-type':'application/json'},
})
}
return fac;
})

AngularJs call a function only after a factory function is called

I am trying login user using factory function in angularjs.
This is my code for checking login info:
$scope.login = function(user) {
if(!$rootScope.isLoggedIn) {
LoginService.login($scope.user, $scope);
console.log($rootScope.isLoggedIn);
} else {
$location.path('/home');
}
}
While LoginService factory service look like this:
.factory('LoginService', ['$http', '$location', '$rootScope', function($http,$location, $rootScope) {
return {
login: function(user, scope) {
$rootScope.processGoingOn = true;
var $promise = $http.post('user.php', user);
$promise.then(function(msg) {
var responseData = msg.data;
console.log(responseData);
if(responseData['login_success'] == 'true') {
$rootScope.isLoggedIn = true;
$rootScope.processGoingOn = false;
// success redirect
} else {
$rootScope.isLoggedIn = false;
$rootScope.processGoingOn = false;
// try login again
}
});
}
....
}
});
The change in $rootScope.isLoggedIn is not reflecting back to $scope.login() function in either success or failure, any suggestions?
this is because login function is returned before promise is resolved.
on way to do this can be return $promise like this
login: function(user, scope){
$rootScope.processGoingOn = true;
return $http.post('user.php', user);
}
call then where you have console.log($rootScope.isLoggedIn);

Angular jwt authentication fails when reloads the page

I'm trying to authenticate user through token. if i login then token will be created and stored in local storage. whenever there is a change in route I'm hitting the api which is built in express js , gives me decoded user value. everything works without refresshing page. Once I refresh the page I'm not able to hit the API. in order to get decoded user value i suppose to click on login button which is there in header , which triggers the route change then again everything works fine. Please help me out .
.controller('mainController', function($rootScope, $location, $window ,Auth){
var vm = this;
$rootScope.loggedIn = Auth.isLoggedIn();
$rootScope.$on('$locationChangeStart', function(){
$rootScope.loggedIn = Auth.isLoggedIn();
Auth.getUser()
.then(function(data){
$rootScope.user = data.data;
});
});
vm.login = function(){
......
}
vm.logout = function(){
......
}
})
Service
.factory('Auth', function($http, $q, AuthToken){
var authFactory = {};
authFactory.login = function(username, password){
return $http.post('/api/login', {
username: username,
password: password
})
.success(function(data){
AuthToken.setToken(data.token);
return data;
});
};
authFactory.logout = function(){
AuthToken.setToken();
};
authFactory.isLoggedIn = function(){
if(AuthToken.getToken()){
return true;
} else {
return false;
}
};
authFactory.getUser = function(){
if(AuthToken.getToken()){
return $http.get('/api/me');
} else {
return $q.reject({ message: "User has no token"});
}
};
return authFactory;
})
factory for setting token and interceptor code
.factory('AuthToken', function($window){
var authTokenFactory = {};
authTokenFactory.getToken = function(){
return $window.localStorage.getItem('token');
};
authTokenFactory.setToken = function(token){
if(token){
$window.localStorage.setItem('token', token);
} else {
$window.localStorage.removeItem('token');
}
};
return authTokenFactory;
})
.factory('AuthInterceptor', function($q, $location, AuthToken){
var interceptorFactory = {};
interceptorFactory.request = function(config){
var token = AuthToken.getToken();
if(token){
config.headers['x-access-token'] = token;
}
return config;
};
interceptorFactory.responseError = function(response){
if(response.status == 403){
$location.path('/login');
}
return $q.reject(response);
};
return interceptorFactory;
});
It may be that you have to reset the $http default headers on refresh. Using cookies in my case, I make a call to the following function at the beginning of $on('$stateChangeStart'):
service.RefreshGlobalVars = function () {
if ($http.defaults.headers.common.RefreshToken == null) {
$http.defaults.headers.common.Authorization = "Bearer " + $cookieStore.get('_Token');
$http.defaults.headers.common.RefreshToken = $cookieStore.get('_RefreshToken');
}
};
edit- to clarify, since I haven't seen your setToken() function, your implementation may vary, but that's pretty much the gist of it.
I got answer, solved it by checking route change in the main app.js, inside run block.
MyApp.run(function ($rootScope, $location, Auth){
$rootScope.loggedIn = Auth.isLoggedIn();
$rootScope.$on('$locationChangeStart', function(){
$rootScope.loggedIn = Auth.isLoggedIn();
Auth.getUser()
.then(function(data){
$rootScope.user = data.data;
});
});

Resources