Securing specific pages in Angular front-end: A guide to implementing authentication

Question

Securing specific pages in Angular front-end: A guide to implementing authentication

Interested in developing a web application using Node.js that allows users to log in (authentication). The app will have 3 non-secure pages (/home, /contact, /about) and one secure page (/admin). I've been consulting the Mean Machine book from scotch.io for guidance.

I'm facing an issue with setting up the authentication. While the login feature works correctly and redirects me to /admin upon logging in, I can still access the /admin page by directly entering the URL without logging in. I need help figuring out where to implement the actual protection mechanism.

Here's an overview of how I structured my app. I'm looking for a conceptual answer on the correct approach rather than just a code snippet.

Services:

The auth service sends the inputted username/password to the server and returns either false or success (along with user info and JWT token).
The auth service also injects the token into each HTTP header as AuthInterceptor

Router:

angular.module('routerRoutes', ['ngRoute'])
    .config(function($routeProvider, $locationProvider) {
        $routeProvider
            .when('/', {
                templateUrl:    'views/home.html',
                controller:     'homeController',
                controllerAs:   'home'
            })
            // More route configurations here...
            .when('/admin', {
                templateUrl:    'views/admin/admin.html',
                controller:     'adminController',
                controllerAs:   'admin'
            });

        $locationProvider.html5Mode(true);

    });

Controllers:

homeController, aboutController, contactController are currently empty
adminController:

.controller('adminController', function($rootScope, $location, Auth) {
```
// Controller logic here

});
```
});

Below is a snippet of my index.html file:

<body class="container" ng-app="meanApp" ng-controller="adminController as admin">

    // HTML content here

</body>

If you have suggestions on improving my setup and any best practices I should follow, please let me know.

Lastly, I have a small question regarding the visibility of elements based on conditions in Angular:

I expected that elements with "ng-if" directives wouldn't appear in the 'view source' if the condition wasn't met, but they do show up. Is this normal behavior?

javascript angularjs authentication

Answer 1

Answer №1

Implementing a custom property route has been integral to ensuring the security of the routes within my application. Each state change is monitored for this specific property, and if it is present, the user's login status is checked. If the user is not logged in, they are redirected to the 'login' state.

In my current project, I utilized UI-ROUTER and created a custom parameter named "data" to be used within the routes.

Here is an example of how I declared the initial routes within a .config block:

$stateProvider
.state('login', {
    url: '/login',
    templateUrl: 'login/login.html',
    controller: 'LoginController',
    controllerAs: 'vm'
})
.state('home', {
    url: '',
    templateUrl: 'layout/shell.html',
    controller: 'ShellController',
    controllerAs: 'vm',
    data: {
        requireLogin: true
    }
})

I then added the following code to a .run function in the application to handle the $stateChangeStart event and check for my custom property ('data') in the state declaration:

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {

var requireLogin = toState.hasOwnProperty('data') && toState.data.requireLogin;
if (requireLogin && !authService.isLoggedIn()) {
    event.preventDefault();
    authService.setDestinationState(toState.name);
    $state.go('login');
}

if (toState.name !== 'login') {
    authService.setDestinationState(toState.name);
}
});

If you're wondering about the functionality of the authService.setDestinationState method, it saves the URL that the user was trying to access. After successfully logging in, the user is automatically directed to that saved state (as shown below):

function login() {
authService.authLogin(vm.credentials)
.then(loginComplete)
.catch(loginFailed);

function loginComplete(data, status, headers, config) {
    vm.user = data;
    $rootScope.$broadcast('authorized');
    $state.go(authService.getDestinationState());
}

function loginFailed(status) {
    console.log('XHR Failed for login.');
    vm.user = undefined;
    vm.error = 'Error: Invalid user or password. ' + status.error;
    toastr.error(vm.error, {closeButton: true} );
}
}

Answer 2

Implementing a custom property route has been integral to ensuring the security of the routes within my application. Each state change is monitored for this specific property, and if it is present, the user's login status is checked. If the user is not logged in, they are redirected to the 'login' state.

In my current project, I utilized UI-ROUTER and created a custom parameter named "data" to be used within the routes.

Here is an example of how I declared the initial routes within a .config block:

$stateProvider
.state('login', {
    url: '/login',
    templateUrl: 'login/login.html',
    controller: 'LoginController',
    controllerAs: 'vm'
})
.state('home', {
    url: '',
    templateUrl: 'layout/shell.html',
    controller: 'ShellController',
    controllerAs: 'vm',
    data: {
        requireLogin: true
    }
})

I then added the following code to a .run function in the application to handle the $stateChangeStart event and check for my custom property ('data') in the state declaration:

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {

var requireLogin = toState.hasOwnProperty('data') && toState.data.requireLogin;
if (requireLogin && !authService.isLoggedIn()) {
    event.preventDefault();
    authService.setDestinationState(toState.name);
    $state.go('login');
}

if (toState.name !== 'login') {
    authService.setDestinationState(toState.name);
}
});

If you're wondering about the functionality of the authService.setDestinationState method, it saves the URL that the user was trying to access. After successfully logging in, the user is automatically directed to that saved state (as shown below):

function login() {
authService.authLogin(vm.credentials)
.then(loginComplete)
.catch(loginFailed);

function loginComplete(data, status, headers, config) {
    vm.user = data;
    $rootScope.$broadcast('authorized');
    $state.go(authService.getDestinationState());
}

function loginFailed(status) {
    console.log('XHR Failed for login.');
    vm.user = undefined;
    vm.error = 'Error: Invalid user or password. ' + status.error;
    toastr.error(vm.error, {closeButton: true} );
}
}

Answer 3

Answer №2

When setting up your Admin route, you have the option to include a property called resolve. Each item within resolve should be a function (which can also be an injectable function). This function needs to return a promise, whose result can then be injected into the controller.

If you want more details about resolve, check out this article.

You can utilize resolve in order to perform an authentication check like this:

var authenticateRoute = ['$q', '$http' , function ($q, $http) {
    var deferred = $q.defer();
    $http.get("http://api.domain.com/whoami")
         .then(function(response) { 
                   if (response.data.userId) deferred.resolve(response.data.userId);  
                   else window.location.href = "#/Login"
               });
    return deferred.promise();
}]

// ...

.when('/admin', {
    templateUrl: 'views/admin/admin.html',
    controller: 'adminController',
    controllerAs: 'admin',
    resolve: {
        authenticatedAs: authenticateRoute
    }
});

By doing this, you can pass the authenticated User Id - even if it's null - and let the controller handle it, perhaps to display a contextual message. Alternatively, you can follow the approach mentioned above and redirect to the login page only if there is no user Id from the authentication response.

I hope this explanation helps! /AJ

Answer 4

When setting up your Admin route, you have the option to include a property called resolve. Each item within resolve should be a function (which can also be an injectable function). This function needs to return a promise, whose result can then be injected into the controller.

If you want more details about resolve, check out this article.

You can utilize resolve in order to perform an authentication check like this:

var authenticateRoute = ['$q', '$http' , function ($q, $http) {
    var deferred = $q.defer();
    $http.get("http://api.domain.com/whoami")
         .then(function(response) { 
                   if (response.data.userId) deferred.resolve(response.data.userId);  
                   else window.location.href = "#/Login"
               });
    return deferred.promise();
}]

// ...

.when('/admin', {
    templateUrl: 'views/admin/admin.html',
    controller: 'adminController',
    controllerAs: 'admin',
    resolve: {
        authenticatedAs: authenticateRoute
    }
});

By doing this, you can pass the authenticated User Id - even if it's null - and let the controller handle it, perhaps to display a contextual message. Alternatively, you can follow the approach mentioned above and redirect to the login page only if there is no user Id from the authentication response.

I hope this explanation helps! /AJ

Securing specific pages in Angular front-end: A guide to implementing authentication

Answer №1

Answer №2

Similar questions

Is it possible to ensure a div occupies all available space within a column using the vh-100 class in bootstrap?

AngularJS - the element of surprise in execution sequence

The ineffective operation of LoopBack ACL

What are the steps to effectively utilize <ul> for showcasing scrolling content?

Updating variable storage in React components

What could be the reason for react-query searching for dispatch even when redux is not activated or present in the component?

When you include ng-href in a button using AngularJS, it causes a shift in the alignment of the text within the button

jquery logic for iterating through all elements in a select menu encountering issues

How can I change the background color of the initial word in a textbox?

Using AngularJS to apply filters to JSON data

Tips for providing support to a website without an internet connection

several parameters for the `ts-node -r` options

Utilizing the .on() method to select elements based on a unique attribute

Which is better for managing checkbox state in React - react-bootstrap or material-ui?

Filtering substrings in an Angular data resource

Having trouble accessing undefined properties in ReactJs? Specifically, encountering issues when trying to read the property "name"?

The code encountered an error with message TS2345 stating that the argument type '(a: Test, b: Test) => boolean | 1' cannot be assigned to a parameter type of '(a: Test, b: Test) => number'

Ways to retrieve the chosen option from a dropdown menu within an AngularJS controller

Bootstrap Tags Input - the tagsinput does not clear values when removed

Looking for a powerful filtering menu similar to Excel or Kendo UI Grid in Datatables?