Implementing Login Authentication and Route Protection in AngularJS Applications

Design and Implementation of Authentication Service

In AngularJS applications, the core function of an authentication service is to manage user login status and user information. Singleton services created through the factory pattern ensure consistent user state sharing across the entire application.

angular.module('myApp').factory('Auth', function() {
    var user;
    
    return {
        setUser: function(aUser) {
            user = aUser;
        },
        isLoggedIn: function() {
            return (user) ? user : false;
        }
    };
});

This service provides two core methods: setUser for setting current user information, and isLoggedIn for checking whether the user is logged in. This design ensures that user state can be consistently accessed and modified throughout the application.

Route Protection Mechanism

AngularJS's $routeChangeStart event provides an ideal entry point for route protection. By listening to this event in the application's run block, authentication checks can be performed before route switching.

angular.module('myApp').run(['$rootScope', '$location', 'Auth', 
function($rootScope, $location, Auth) {
    $rootScope.$on('$routeChangeStart', function(event) {
        if (!Auth.isLoggedIn()) {
            console.log('Access denied: User not logged in');
            event.preventDefault();
            $location.path('/login');
        } else {
            console.log('Access allowed: User logged in');
        }
    });
}]);

When detecting that the user is not logged in, route switching is prevented by calling event.preventDefault(), and the user is redirected to the login page using $location.path(). This mechanism ensures that only authenticated users can access protected routes.

Implementation of Login Controller

The login controller handles user authentication requests and interacts with the authentication service to update user status.

angular.module('myApp').controller('LoginController', 
['$scope', '$location', 'Auth', function($scope, $location, Auth) {
    $scope.user = {};
    
    $scope.login = function() {
        // In practical applications, authentication requests should be sent to the server here
        var username = $scope.user.name;
        var password = $scope.user.password;
        
        if (username === "admin" && password === "admin123") {
            Auth.setUser($scope.user);
            $location.path('/home');
        } else {
            $scope.message = "Invalid username or password";
            $scope.messagecolor = "alert alert-danger";
        }
    };
}]);

After successful authentication, the controller calls Auth.setUser() to set user information and redirects to the home page. This design separates authentication logic from interface logic, improving code maintainability.

State Monitoring in Main Controller

The main controller monitors changes in user status through the $watch mechanism, ensuring timely responses when users log out.

angular.module('myApp').controller('MainController', 
['$scope', 'Auth', '$location', function($scope, Auth, $location) {
    $scope.$watch(Auth.isLoggedIn, function(value, oldValue) {
        if (!value && oldValue) {
            console.log("User logged out");
            $location.path('/login');
        }
        
        if (value) {
            console.log("User logged in");
            // Processing logic after user login
        }
    }, true);
}]);

This monitoring mechanism ensures the application can promptly respond to changes in authentication status, providing users with a consistent experience.

Security Considerations and Best Practices

While frontend authentication checks provide good user experience, it must be emphasized: all frontend authentication checks must be re-implemented on the server side. Because users have full control over the browser environment, they may bypass frontend checks.

In actual deployment, you should:

• Use HTTPS to protect data transmission during authentication
• Validate permissions for all sensitive operations on the server side
• Implement appropriate session management and timeout mechanisms
• Perform strict validation and sanitization of user input

Extended Function Implementation

Based on the basic authentication framework, additional functions can be extended:

// Add logout functionality
$scope.logout = function() {
    Auth.setUser(null);
    $location.path('/login');
};

// Add user information persistence
localStorage.setItem('user', JSON.stringify(user));
var savedUser = JSON.parse(localStorage.getItem('user'));

By combining local storage, user session persistence can be achieved, enhancing user experience. Additionally, more complex permission control logic can be added to meet requirements of different scenarios.