Email is required.
Invalid email address.
Password is required.
The length is too short.
The length is too long.
https://github.com/piyalidas10/login-logout-in-angularjs
AngularJS Login Application and Session Create
https://github.com/piyalidas10/login-logout-in-angularjs
angular angular1 angularjs authentication authorization form localstorage login login-logout loginform session session-management
Last synced: 4 months ago
JSON representation
AngularJS Login Application and Session Create
- Host: GitHub
- URL: https://github.com/piyalidas10/login-logout-in-angularjs
- Owner: piyalidas10
- Created: 2017-11-04T04:20:14.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-04T07:34:31.000Z (over 8 years ago)
- Last Synced: 2025-02-25T14:51:57.682Z (over 1 year ago)
- Topics: angular, angular1, angularjs, authentication, authorization, form, localstorage, login, login-logout, loginform, session, session-management
- Language: HTML
- Size: 13.7 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Login-logout-in-angularjs
AngularJS Login Controller
The login function exposed by the controller calls the Authentication Service to authenticate the username and password entered into the view.
app.controller('loginCtrl', function($scope,$location,$rootScope,$sce){
$rootScope.isLoggedIn = false;
$scope.login = function(){
if ($scope.loginform.$valid) {
if($scope.email == 'admin@gmail.com' && $scope.pass == 'admin123')
{
alert('login successful');
$rootScope.isLoggedIn = true;
$scope.UserId = $scope.email;
$scope.session = $scope.email;
$scope.sessionName = 'admin';
window.localStorage.setItem("SessionId", $scope.session);
window.localStorage.setItem("SessionName", $scope.sessionName);
window.localStorage.setItem("isLoggedIn", $scope.isLoggedIn);
//userDetails.SessionId = $scope.session;
$location.path('/dashboard');
}
else{
$rootScope.isLoggedIn = false;
window.localStorage.setItem("isLoggedIn", $rootScope.isLoggedIn);
$scope.loginMessage = $sce.trustAsHtml(' check your email id and password');
console.log($scope.loginMessage);
}
}
}
});
AngularJS Login View
The Login View contains a small form with the usual fields for emailid and password, and some validation messages.
Login
Email is required.
Invalid email address.
Password is required.
The length is too short.
The length is too long.
AngularJS App.js
The part of this file related to authentication is in the run function, when the app starts it checks if there's a localStorage containing user credentials meaning the user has already logged in, this is to keep the user logged in after a page refresh.
On each location change there's a check using checkAuth factory to verify that the user is logged in if trying to access a restricted page, if not they're redirected to the login page.
Write the following code to call factory after window.localStorage.getItem("isLoggedIn") because with eachtime page refresh isLoggedIn variable's value will be null and have to fetch the value from localstorage.
$scope.check = checkAuth.getuserInfo();
var app = angular.module('loginApp',['ngRoute']);
app.config([ '$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/',{
templateUrl : 'view/login.html',
controller : 'loginCtrl'
})
.when('/dashboard',{
templateUrl : 'view/dashboard.html',
controller : 'dashCtrl'
})
}
]);
/* Create factory to Disable Browser Back Button only after Logout */
app.factory("checkAuth", function($location,$rootScope){
return {
getuserInfo : function(){
if($rootScope.isLoggedIn === undefined || $rootScope.isLoggedIn === null){
$location.path('/');
}
}
};
});
app.controller('loginCtrl', function($scope,$location,$rootScope,$sce){
$rootScope.isLoggedIn = false;
$scope.login = function(){
if ($scope.loginform.$valid) {
if($scope.email == 'admin@gmail.com' && $scope.pass == 'admin123')
{
alert('login successful');
$rootScope.isLoggedIn = true;
$scope.UserId = $scope.email;
$scope.session = $scope.email;
$scope.sessionName = 'admin';
window.localStorage.setItem("SessionId", $scope.session);
window.localStorage.setItem("SessionName", $scope.sessionName);
window.localStorage.setItem("isLoggedIn", $scope.isLoggedIn);
//userDetails.SessionId = $scope.session;
$location.path('/dashboard');
}
else{
$rootScope.isLoggedIn = false;
window.localStorage.setItem("isLoggedIn", $rootScope.isLoggedIn);
$scope.loginMessage = $sce.trustAsHtml(' check your email id and password');
console.log($scope.loginMessage);
}
}
}
});
app.controller('dashCtrl', function($scope,$location,$rootScope,$http,checkAuth){
$rootScope.session = window.localStorage.getItem("SessionId");
$rootScope.userName = window.localStorage.getItem("SessionName");
$rootScope.isLoggedIn = window.localStorage.getItem("isLoggedIn");
// Call checkAuth factory for cheking login details
$scope.check = checkAuth.getuserInfo();
$scope.logout = function () {
window.localStorage.clear();
$rootScope.isLoggedIn = false;
$location.path("/");
};
});