In this post we are going to see how to create the login authentication in angular js application in state provider.
First we have to create the states, Then we have to create the variable name authenticate to the states which ever need the authentication
We are creating a hook for $stateChangeStart event , so when ever we change state this will hooked, from there we are checking whether authenticate is required for this state, if it is required then we are invoking the authService for checking the authentication, if failed then we change the state or transition the state to login state.
Then we have to write logic in statechangestart event in run based on authenticate variable, now we will see what is the authservice, and what logic it resides
From this post you can learn how to add the authentication for each state in the angular js applications
First we have to create the states, Then we have to create the variable name authenticate to the states which ever need the authentication
We are creating a hook for $stateChangeStart event , so when ever we change state this will hooked, from there we are checking whether authenticate is required for this state, if it is required then we are invoking the authService for checking the authentication, if failed then we change the state or transition the state to login state.
var mvcapp = angular.module('mvcapp', ['ui.router', 'ngCookies', 'ngStorage',]);
configure states:
******************
mvcapp.config(['$stateProvider', '$urlRouterProvider', '$localStorageProvider',
'$locationProvider',
function ($stateProvider, $urlRouterProvider, $localStorageProvider,
$locationProvider) {
$stateProvider.state('home',
{
name: 'home',
url: '/home',
templateUrl: 'app/templates/home.html',
controller: 'homeController'
})
.state('about',
{
name: 'about',
url: '/about',
templateUrl: 'app/templates/about.html',
controller: 'aboutController'
})
.state('login',
{
name: 'login',
url: '/login',
templateUrl: 'app/templates/login.html',
controller: 'loginController',
resolve: { signIn: AlreadySignin }
})
.state('register',
{
name: 'register',
url: '/register',
templateUrl: 'app/templates/register.html',
controller: 'registerController',
resolve: { signIn: AlreadySignin }
})
.state('profile',
{
name: 'profile',
url: '/profile',
templateUrl: 'app/templates/profile.html',
controller: 'profileController',
authenticate: true
})
.state('history',
{
name: 'history',
url: '/history',
templateUrl: 'app/templates/history.html',
controller: 'historyController',
authenticate: true
})
.state("default",
{
name: 'default',
url: '/',
templateUrl: 'app/templates/home.html',
controller: 'homeController'
});
$urlRouterProvider.otherwise('/');
$localStorageProvider.setKeyPrefix('mvcapp');
$locationProvider.html5Mode(false);
}]);
handling exception in global:
********************************
mvcapp.config(['$provide',function ($provide) {
$provide.decorator('$exceptionHandler', ['$delegate', '$log',
function ($delegate, $log) {
return function (exception, cause) {
$delegate(exception, cause);
$log.info(exception.message + " (because of " + cause + " )");
};
}])
}]);
check for login, if logged in redirect to home:
***************************************************
AlreadySignin.$inject
= ['$rootScope','$state', '$location', 'authService'];
function AlreadySignin($rootScope, $state,$location, authService) {
if (authService.isLoggedIn()) {
return $location.path("/home");
}
}
Then we have to write logic in statechangestart event in run based on authenticate variable, now we will see what is the authservice, and what logic it resides
mvcapp.run(['$rootScope', '$location', '$http', 'authService', '$state', '$timeout',
function ($rootScope, $location, $http, authService, $state, $timeout) {
if (authService.isLoggedIn())
{
$http.defaults.headers.common['Authorization'] = 'Bearer ' +
authService.getAuthCode().Authcode;
}
function safeApply(scope, fn) {
(scope.$$phase || scope.$root.$$phase)
? fn() : scope.$apply(fn);
}
$rootScope.$on('$stateChangeStart', function (event, toState, toParams,
fromState,
fromParams) {
if (toState.authenticate && !authService.isLoggedIn()) {
// User isn’t
authenticated
$state.transitionTo("login");
$rootScope.redirect = toState.name;
event.preventDefault();
}
if (toState.authenticate && authService.isLoggedIn()) {
var role = authService.getAuthCode().Role;
}
safeApply($rootScope, function () {
$timeout(function () {
$rootScope.$broadcast('updatelogin');
})
});
});
}]);
authService:
*************
mvcapp.service('authService', ['$localStorage', '$rootScope',
function ($localStorage,$rootScope) {
this.getAuthCode = function () {
return $localStorage.authuser;
}
this.setAuthCode = function (authdata) {
$localStorage.authuser = authdata;
}
this.removeAuthCode = function () {
delete $localStorage.authuser;
var loggeduser = { Status: '', Username: '',
Authcode: '' };
$rootScope.$broadcast('loguser', loggeduser);
}
this.isLoggedIn = function () {
return $localStorage.authuser != null && $localStorage.authuser.Authcode != null;
}
}]);
Output:
*************
From this post you can learn how to add the authentication for each state in the angular js applications
No comments:
Post a Comment