Implementing Login Authentication with AngularJS ui-router

Introduction

In AngularJS applications, user authentication and authorization are critical for secure navigation. This article aims to provide a thorough implementation approach using the ui-router library to manage login processes, covering aspects from identity management to state verification. By referencing the best answer, we extract key concepts and reorganize the logical structure to help developers better understand and apply these techniques.

Principal Service: Managing User Identity

The principal service is the core of the authentication system, used to store and manage user identity information. It offers methods to check login status, resolve identity, and verify roles. Here is an example implementation:

.factory('principal', ['$q', '$http', '$timeout', function($q, $http, $timeout) { var _identity = undefined, _authenticated = false; return { isIdentityResolved: function() { return angular.isDefined(_identity); }, isAuthenticated: function() { return _authenticated; }, isInRole: function(role) { if (!_authenticated || !_identity.roles) return false; return _identity.roles.indexOf(role) != -1; }, isInAnyRole: function(roles) { if (!_authenticated || !_identity.roles) return false; for (var i = 0; i < roles.length; i++) { if (this.isInRole(roles[i])) return true; } return false; }, authenticate: function(identity) { _identity = identity; _authenticated = identity != null; }, identity: function(force) { var deferred = $q.defer(); if (force === true) _identity = undefined; if (angular.isDefined(_identity)) { deferred.resolve(_identity); return deferred.promise; } var self = this; $timeout(function() { self.authenticate(null); deferred.resolve(_identity); }, 1000); return deferred.promise; } }; }])

This service resolves identity asynchronously, ensuring accurate login status detection during user access, with support for role checks and identity refresh.

Authorization Service: Checking Permissions

The authorization service is responsible for verifying permissions when users navigate to different states. It works with the principal service to decide whether to allow access or redirect based on authentication status and roles. Example code:

.factory('authorization', ['$rootScope', '$state', 'principal', function($rootScope, $state, principal) { return { authorize: function() { return principal.identity().then(function() { var isAuthenticated = principal.isAuthenticated(); if ($rootScope.toState.data.roles && $rootScope.toState.data.roles.length > 0 && !principal.isInAnyRole($rootScope.toState.data.roles)) { if (isAuthenticated) { $state.go('accessdenied'); } else { $rootScope.returnToState = $rootScope.toState; $rootScope.returnToStateParams = $rootScope.toStateParams; $state.go('signin'); } } }); } }; }])

This service validates user permissions before state changes, redirecting to login if unauthenticated or to an access denied page if unauthorized.

Integration with ui-router: $stateChangeStart Event

To seamlessly integrate authentication, trigger authorization checks in ui-router's $stateChangeStart event. By listening to this event, you can capture the state users attempt to access and call the authorization service. Implementation:

.run(['$rootScope', '$state', '$stateParams', 'authorization', 'principal', function($rootScope, $state, $stateParams, authorization, principal) { $rootScope.$on('$stateChangeStart', function(event, toState, toStateParams) { $rootScope.toState = toState; $rootScope.toStateParams = toStateParams; if (principal.isIdentityResolved()) authorization.authorize(); }); }]);

Additionally, use the resolve option in state definitions to ensure identity resolution during app load. For example, define an abstract state:

$stateProvider.state('site', { 'abstract': true, resolve: { authorize: ['authorization', function(authorization) { return authorization.authorize(); }] }, template: '<div ui-view />' })

This ensures identity resolution completes before state transitions, covering initial app load and subsequent navigation.

State Definition and Role Control

In state definitions, specify required roles via the data property for granular access control. For instance, restrict a state to administrators only:

.state('restricted', { parent: 'site', url: '/restricted', data: { roles: ['Admin'] }, views: { 'content@': { templateUrl: 'restricted.html' } } })

By inheriting from a parent state like 'site', authentication requirements can be easily applied to multiple child states, simplifying configuration and enhancing security.

Conditional Display and Best Practices

Based on authentication status, elements can be conditionally displayed in views. Inject the principal service into controllers and bind it to the scope for use in templates. Example:

.controller('HomeCtrl', ['$scope', 'principal', function($scope, principal) { $scope.principal = principal; }]);

In templates:

<div ng-show="principal.isAuthenticated()"> I am logged in </div> <div ng-hide="principal.isAuthenticated()"> Not logged in </div>

Best practices include unifying identity resolution, avoiding duplicate authorization checks, using state inheritance to reduce redundancy, and ensuring error handling such as configuring access denied pages.

Conclusion

This article, through detailed explanations and code examples, demonstrates how to build a complete login authentication system using AngularJS ui-router. The core lies in the collaboration between principal and authorization services, integrated with the $stateChangeStart event and state definitions to achieve flexible and secure user access control. Developers can adapt role and state configurations based on actual needs for various web application scenarios.