AngularJS - ensure that only authenticated users are allowed to access specific routes

Question

AngularJS - ensure that only authenticated users are allowed to access specific routes

Within my application, I have an authService that manages the isAuthenticated flag when a user is logged in. Each time there is a route change, a listener is triggered by the $routeChangeStart event to verify if the user is authenticated using authService.isAuthenticated(). If not, the user should be redirected to the login route.

The issue arises when a user performs a page refresh and all the settings from authService are cleared, leading them back to the login screen despite having a valid session on the server. This behavior is not desired.

My goal is to delay the route change until I can determine if the user is authenticated - either through immediate verification with authService, or by retrieving the information from the server if it's not available in authService (e.g. after a refresh). The authService includes a function for this:

// returns promise
currentUser: function() {
    if (authService.isAuthenticated()) {
        return $q.when(authService.loggedUser);
    }
    return $http.get('/session').then(function(response) {
        authService.loggedUser = response.user;
        return $q.when(authService.loggedUser);
    });
}

I intend to utilize this function within the event listener:

$rootScope.$on("$routeChangeStart", function (event, next, current) {
    if(isRouteRestricted(next)) {
        authService.currentUser().then(null, function() {
            $location.path('/login');
        });
    }
});

However, the implementation does not behave as expected. The target route is still briefly visible before the redirection occurs. I suspect this is related to the asynchronous nature of promises, but how can I prevent this "blink" effect?

javascript security angularjs

Answer 1

Answer №1

In the main controller, I would implement something similar to this approach, where the initial controller called upon page refresh is considered the top level controller (please excuse any errors in the javascript code, as my expertise lies more in coffeescript):

var authenticationRequired = function (event, next, current) {
    if(isRouteRestricted(next)) {
        authService.currentUser().then(null, function() {
            $location.path('/login');
        });
    }
}

authenticationRequired(null, getUpdatedDetails).then(function () {
    // All of your important controller logic can be executed here, possibly within a separate function
});

$rootScope.$on("$routeChangeStart", authenticationRequired);

By setting up this structure, it ensures that the controller code will not run until the authentication checks have successfully completed.

Answer 2

In the main controller, I would implement something similar to this approach, where the initial controller called upon page refresh is considered the top level controller (please excuse any errors in the javascript code, as my expertise lies more in coffeescript):

var authenticationRequired = function (event, next, current) {
    if(isRouteRestricted(next)) {
        authService.currentUser().then(null, function() {
            $location.path('/login');
        });
    }
}

authenticationRequired(null, getUpdatedDetails).then(function () {
    // All of your important controller logic can be executed here, possibly within a separate function
});

$rootScope.$on("$routeChangeStart", authenticationRequired);

By setting up this structure, it ensures that the controller code will not run until the authentication checks have successfully completed.

Answer 3

Answer №2

Here are steps to prevent a user from accessing routes:

Firstly, define your routes and include a property like 'access' : allowAnonymous : true or false

// in app.js
var myApp = angular.module('myApp',['ngResource', 'ngCookies', 'ngRoute']);       
myApp.config(function ($httpProvider, $routeProvider) {
   window.routes = {
        '/Login':
           { templateUrl: '/Account/Login',
             controller: 'AccountController',
             access : {allowAnonymous : true}
           },
        '/MembersPage':
           { templateUrl: '/Home/SomePage,
             controller: SomePageController',
             access: {allowAnonymous:false}
           }
         };

        for (var path in window.routes) {
           $routeProvider.when(path, window.routes[path]);
    }
    $routeProvider.otherwise({ redirectTo: '/Login' });
});

Secondly, identify an authenticated user:

To achieve this, create a 'UserService' in AngularJS that stores the current user's name and authentication status.

// in UserService.js
myApp.factory('userService', function () {
var user = {
    isLogged: false,
    username: '',       
};

var reset = function() {
    user.isLogged = false;
    user.username = '';
};

return {
    user: user,
    reset : reset
  };
});

Lastly, capture route change events and handle them accordingly:

Implement functionality to check if a user is authenticated when navigating routes using methods like '$routeChangeStart' and '$locationChangeStart'. If the user is not logged in and tries to access a restricted route, display an error message and redirect them to the login page.

// in RootController.js
myApp.controller('RootController',
function ($scope, $route, $routeParams, $location, $rootScope, authenticationService,   
userService, toaster) {
 $scope.user = userService.user;
 $scope.$on('$routeChangeStart', function (e, next, current) {               
     if (next.access != undefined && !next.access.allowAnonymous && !$scope.user.isLogged) {
                $location.path("/Login");                   
            }
        });

        $scope.logout = function () {
            authenticationService.logout()
                .success(function (response) {
                    userService.reset();                       
                    toaster.pop("info", 'You are logged out.', '');
                });
        };

 $rootScope.$on("$locationChangeStart", function (event, next, current) {
  for (var i in window.routes) {
    if (next.indexOf(i) != -1) {
     if (!window.routes[i].access.allowAnonymous && !userService.user.isLogged) {
          toaster.pop("error", 'You are not logged in!', '');
             $location.path("/Login");                                                 
                    }
                }
            }
        });
    });

For more information, visit

Hope this guide helps!

Answer 4

Here are steps to prevent a user from accessing routes:

Firstly, define your routes and include a property like 'access' : allowAnonymous : true or false

// in app.js
var myApp = angular.module('myApp',['ngResource', 'ngCookies', 'ngRoute']);       
myApp.config(function ($httpProvider, $routeProvider) {
   window.routes = {
        '/Login':
           { templateUrl: '/Account/Login',
             controller: 'AccountController',
             access : {allowAnonymous : true}
           },
        '/MembersPage':
           { templateUrl: '/Home/SomePage,
             controller: SomePageController',
             access: {allowAnonymous:false}
           }
         };

        for (var path in window.routes) {
           $routeProvider.when(path, window.routes[path]);
    }
    $routeProvider.otherwise({ redirectTo: '/Login' });
});

Secondly, identify an authenticated user:

To achieve this, create a 'UserService' in AngularJS that stores the current user's name and authentication status.

// in UserService.js
myApp.factory('userService', function () {
var user = {
    isLogged: false,
    username: '',       
};

var reset = function() {
    user.isLogged = false;
    user.username = '';
};

return {
    user: user,
    reset : reset
  };
});

Lastly, capture route change events and handle them accordingly:

Implement functionality to check if a user is authenticated when navigating routes using methods like '$routeChangeStart' and '$locationChangeStart'. If the user is not logged in and tries to access a restricted route, display an error message and redirect them to the login page.

// in RootController.js
myApp.controller('RootController',
function ($scope, $route, $routeParams, $location, $rootScope, authenticationService,   
userService, toaster) {
 $scope.user = userService.user;
 $scope.$on('$routeChangeStart', function (e, next, current) {               
     if (next.access != undefined && !next.access.allowAnonymous && !$scope.user.isLogged) {
                $location.path("/Login");                   
            }
        });

        $scope.logout = function () {
            authenticationService.logout()
                .success(function (response) {
                    userService.reset();                       
                    toaster.pop("info", 'You are logged out.', '');
                });
        };

 $rootScope.$on("$locationChangeStart", function (event, next, current) {
  for (var i in window.routes) {
    if (next.indexOf(i) != -1) {
     if (!window.routes[i].access.allowAnonymous && !userService.user.isLogged) {
          toaster.pop("error", 'You are not logged in!', '');
             $location.path("/Login");                                                 
                    }
                }
            }
        });
    });

For more information, visit

Hope this guide helps!

AngularJS - ensure that only authenticated users are allowed to access specific routes

Answer №1

Answer №2

Similar questions

When setting an empty URL with Fabricjs' setBackgroundImage function, a null reference error occurs in the _setWidthHeight

Utilizing the W3Schools CodeColor library across various elements

Assign a value to a text input using React

The straightforward onclick action only functioned once

Having difficulty constructing the tree hierarchy in a React project

Leveraging client API callback variables within a Node.js backend system

How to open a hyperlink in a separate background tab with JavaScript or jQuery

Error: The function `map` cannot be applied to `cardsData`

Is it possible to establish role-based access permissions once logged in using Angular 6?

Encountering a Node V18 Peer Dependency Conflict错

Testing Redirects with Protractor and Jasmine: Strategies and Best Practices

Transferring data from a JavaScript variable to PHP using AJAX

Developing asynchronous DOM functions for optimal performance

What is preventing my for loop from reaching the initial index in this visually distinct nested array pattern?

Identifying and capturing changes in child scope events or properties in Angular

What is the process for integrating a popup component into a React-Native application?

When using NodeJS and MongoDB together, a POST request may receive a 404 error code

Sending data from Django's render() method to React.js

AngularJS: Utilizing services to make API requests and retrieve JSON data

The JavaScript array created from parsing JSON returns a value of undefined