Access control and permissions in Angular's UI router

Question

Access control and permissions in Angular's UI router

I am struggling to figure out how to implement permissions and access control in our Angular app. Currently, our setup looks like this:

app.config(['$stateProvider', function ($stateProvider) {

  $stateProvider

  .state('default', {
    url: '',
    templateUrl: 'pages/home/view/home.html',
    controller: 'HomeCtrl'
  })

  .state('home', {
    url: '/home',
    templateUrl: 'pages/home/view/home.html',
    controller: 'HomeCtrl',

    permissions: {                    // ?
      only: ['Admin','Moderator']
    },

    access: {                         // ?
     roles: ['*']
    },

    resolve: {                        // ?
      authenticate: function($state, $q, $timeout){

      },

    }

  })

}]);

I am unsure of the best approach to take for implementing access control on each page.

Currently, the logged-in user information is stored within an Angular value:

app.value('USER', JSON.parse('{{{user}}}'));

The USER value contains details about the user's roles and permissions.

However, I am unable to inject USER into the app.config() callback as it returns an "unknown provider" error.

How can I enforce access control based on the parameters stored in the USER object?

javascript angularjs angular-ui-router

Answer 1

Answer №1

To effectively implement this, ensure that your access control is added to the event $stateChangeStart.

For instance, if your routing looks like this:

.state('termsofuse', {
    url: "/terms",
    templateUrl: "termOfUse.html",
    resolve: {
        authorizedRoles: function() {
            return [USER_ROLES['su'],
                USER_ROLES['user'],
                USER_ROLES['admin'],
                USER_ROLES['skysu']
            ]
        }
    }
})

You can set up your access control as follows:

.run(function($rootScope, $q, $location, $window, $timeout) {
    $rootScope.$on(
        '$stateChangeStart',
        function(event, next, current) {                      
            var authorizedRoles = next.resolve.authorizedRoles();
        
            // Check if user has necessary roles
            if (!isAuthorized(authorizedRoles)) {
                event.preventDefault();
                $rootScope.$broadcast("AUTH_EVENTS.notAuthenticated");
            } else {
                $rootScope.$broadcast("AUTH_EVENTS.loginSuccess");
            }
        })
});

Then define an event listener to handle the desired behavior (e.g. redirect or display an error message).

Answer 2

To effectively implement this, ensure that your access control is added to the event $stateChangeStart.

For instance, if your routing looks like this:

.state('termsofuse', {
    url: "/terms",
    templateUrl: "termOfUse.html",
    resolve: {
        authorizedRoles: function() {
            return [USER_ROLES['su'],
                USER_ROLES['user'],
                USER_ROLES['admin'],
                USER_ROLES['skysu']
            ]
        }
    }
})

You can set up your access control as follows:

.run(function($rootScope, $q, $location, $window, $timeout) {
    $rootScope.$on(
        '$stateChangeStart',
        function(event, next, current) {                      
            var authorizedRoles = next.resolve.authorizedRoles();
        
            // Check if user has necessary roles
            if (!isAuthorized(authorizedRoles)) {
                event.preventDefault();
                $rootScope.$broadcast("AUTH_EVENTS.notAuthenticated");
            } else {
                $rootScope.$broadcast("AUTH_EVENTS.loginSuccess");
            }
        })
});

Then define an event listener to handle the desired behavior (e.g. redirect or display an error message).

Answer 3

Answer №2

Have you considered exploring ngAA? It pairs well with ui-router.

Answer 4

Have you considered exploring ngAA? It pairs well with ui-router.

Answer 5

Answer №3

This was the solution I found to make it work. While it may not be perfect, it gets the job done.

It is not possible to inject services or values directly into the app.config(), but you can do so in the resolve.authenticate function.

I opted to follow the resolve.authenticate approach for my implementation.

.state('dashboard', {
    url: '/dashboard',
    templateUrl: 'pages/dashboard/view/dashboard.html',
    controller: 'DashboardCtrl',
    resolve: {
        authenticate: handlePageRequest['dashboard']   // <<<<
    }
})

Additionally, we define a handler as follows:


let handlePageRequest = {

    'default': function ($q, USER, $state, $timeout, AuthService) {
        // This page is always accessible
        return $q.when();
    },

    'dashboard': function ($q, USER, $state, $timeout, AuthService) {

        if (AuthService.isDashboardAccessible(USER)) {
            return $q.when();
        } else {
            $timeout(function () {
                $state.go('unauthorized'); // Preventing access to dashboard page
            }, 100);

            return $q.reject()
        }
    },
};

Answer 6

This was the solution I found to make it work. While it may not be perfect, it gets the job done.

It is not possible to inject services or values directly into the app.config(), but you can do so in the resolve.authenticate function.

I opted to follow the resolve.authenticate approach for my implementation.

.state('dashboard', {
    url: '/dashboard',
    templateUrl: 'pages/dashboard/view/dashboard.html',
    controller: 'DashboardCtrl',
    resolve: {
        authenticate: handlePageRequest['dashboard']   // <<<<
    }
})

Additionally, we define a handler as follows:


let handlePageRequest = {

    'default': function ($q, USER, $state, $timeout, AuthService) {
        // This page is always accessible
        return $q.when();
    },

    'dashboard': function ($q, USER, $state, $timeout, AuthService) {

        if (AuthService.isDashboardAccessible(USER)) {
            return $q.when();
        } else {
            $timeout(function () {
                $state.go('unauthorized'); // Preventing access to dashboard page
            }, 100);

            return $q.reject()
        }
    },
};

Access control and permissions in Angular's UI router

Answer №1

Answer №2

Answer №3

Similar questions

Comparing the syntax of JSON to the switch statement in JavaScript

"Implementing JavaScript Validation for Textboxes: A Step-by-Step Guide

Displaying a loading animation within a specific div element

Issue with model not displaying after material added in OBLLoader + MTLLoader

Tips for identifying the correct selectedIndex with multiple select elements present on one page

Is it possible that bitwise left shifts in JavaScript ES6 (<<) become cyclical after surpassing a shift of 63?

Emphasize a thumbnail by decorating it when selected in the gallery display page

Basic JavaScript Calculator Utilizing JQuery

Encountering a (500 / 503) error on the Heroku application, incorporating Laravel 5.1 and AngularJS, utilizing both GET and POST methods

The Authorization Header is added just once during an AJAX CORS request

What's the best approach: Backbone-Relational discovery or retrieval?

Problem with exporting data from the API to a JavaScript file in Excel format

Change the color when hovering over the select box

Creating HTML inputs dynamically using jQuery in an ASP.NET application

Detecting Unflushed Requests in Jasmine and AngularJS

Creating a see-through effect in Three.js with React Fiber

Font Family Not Recognized in React Native

Ways to avoid overflow of dynamically added div element?

Click on the navigation bar buttons to toggle between different divs and display multiple information boxes simultaneously

Ensuring the accuracy of dynamic form data in Angular before submission