Creating a route provider tailored to specific user roles

Question

Creating a route provider tailored to specific user roles

I have a rather straightforward requirement.

There are 3 different User Roles:

CATUSER
LICUSER
ALLUSER
- The User Role value is stored in the $rootScope.userRole variable.
- The User Role is predefined before the AngularJS application starts as the AngularJS app gets called from a PHP script where the User Role is set.

Upon starting the AngularJS app, I need to configure specific Routes based on the User Role:

$rootScope.userRole == "CATUSER"

if ($rootScope.userRole == "CATUSER") {

    $routeProvider
        .when("/catheter", {
            title: "Catheter Expiration Code Generator",
            templateUrl: "app/catheter/catheter.html",
            controller: "CatheterController",
            controllerAs: "vm"
        })
        .when("/support", {
            title: "Support",
            templateUrl: "app/support/support.html",
            controller: "SupportController",
            controllerAs: "vm"
        })
        .otherwise({
            redirectTo: "/catheter"
        });

}

$rootScope.userRole == "LICUSER"

if ($rootScope.userRole == "LICUSER") {

    $routeProvider
        .when("/license", {
            title: "License Generator",
            templateUrl: "app/license/license.html",
            controller: "LicenseController",
            controllerAs: "vm"
        })
        .when("/support", {
            title: "Support",
            templateUrl: "app/support/support.html",
            controller: "SupportController",
            controllerAs: "vm"
        })
        .otherwise({
            redirectTo: "/license"
        });

}

$rootScope.userRole == "ALLUSER"

if ($rootScope.userRole == "LICUSER") {

   $routeProvider
        .when("/license", {
            title: "License Generator",
            templateUrl: "app/license/license.html",
            controller: "LicenseController",
            controllerAs: "vm"
        })
        .when("/catheter", {
            title: "Catheter Expiration Code Generator",
            templateUrl: "app/catheter/catheter.html",
            controller: "CatheterController",
            controllerAs: "vm"
        })
        .when("/support", {
            title: "Support",
            templateUrl: "app/support/support.html",
            controller: "SupportController",
            controllerAs: "vm"
        })
        .otherwise({
            redirectTo: "/license"
        });

}

It's important to note that I prefer not to utilize UI Router for this task.

javascript angularjs route-provider angularjs-config

Answer 1

Answer №1

In the past, I have utilized UI Router for this specific purpose. Here is a sample code snippet to help you get started:

angular
.module('app', [

])
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
    .state('license', {
        url: 'url',
        templateUrl: './preview.html',
        controller: 'LicenseController',
        data: {
            requiredAuth: true,
            role: ['CATUSER', 'LICUSER'],
            permission : ['read', 'write', 'etc etc']
        }
    })
    $urlRouterProvider.otherwise(subdomain1 + 'error');
})
.run(['$rootScope', '$state', function ($rootScope, $state) {
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
        // Check if user is authenticated
        var isAuthenticationRequired = toState.data
              && toState.data.requiredAuth
              && !AuthService.isAuthenticated() // Use local storage lookup method here
        ;
        // Check if user is authorized
        var isAuthorizationRequired = toState.data
              && (toState.data.role && AuthService.IsInRole(toState.data.role))
              && (toState.data.permission && AuthService.IsInPermission(toState.data.permission))
        ;
        if (isAuthenticationRequired) {
            event.preventDefault();
            $state.go('auth.login');
        } else if (isAuthorizationRequired) {
            event.preventDefault();
            $state.go('auth.denied');
        }
    });
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams, error) {
        cfpLoadingBar.complete();
    });
    $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
        cfpLoadingBar.complete();
    });
}]);

The License route defined above has properties such as data, which specifies that authentication is required and authorization is granted for roles like LICUSER and CATUSER. Additional permissions such as read and write can also be added and checked. If the user is both authenticated and authorized, the requested state will load; otherwise, they will be redirected to either the login or denied page.

Answer 2

In the past, I have utilized UI Router for this specific purpose. Here is a sample code snippet to help you get started:

angular
.module('app', [

])
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
    .state('license', {
        url: 'url',
        templateUrl: './preview.html',
        controller: 'LicenseController',
        data: {
            requiredAuth: true,
            role: ['CATUSER', 'LICUSER'],
            permission : ['read', 'write', 'etc etc']
        }
    })
    $urlRouterProvider.otherwise(subdomain1 + 'error');
})
.run(['$rootScope', '$state', function ($rootScope, $state) {
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
        // Check if user is authenticated
        var isAuthenticationRequired = toState.data
              && toState.data.requiredAuth
              && !AuthService.isAuthenticated() // Use local storage lookup method here
        ;
        // Check if user is authorized
        var isAuthorizationRequired = toState.data
              && (toState.data.role && AuthService.IsInRole(toState.data.role))
              && (toState.data.permission && AuthService.IsInPermission(toState.data.permission))
        ;
        if (isAuthenticationRequired) {
            event.preventDefault();
            $state.go('auth.login');
        } else if (isAuthorizationRequired) {
            event.preventDefault();
            $state.go('auth.denied');
        }
    });
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams, error) {
        cfpLoadingBar.complete();
    });
    $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
        cfpLoadingBar.complete();
    });
}]);

The License route defined above has properties such as data, which specifies that authentication is required and authorization is granted for roles like LICUSER and CATUSER. Additional permissions such as read and write can also be added and checked. If the user is both authenticated and authorized, the requested state will load; otherwise, they will be redirected to either the login or denied page.

Creating a route provider tailored to specific user roles

Answer №1

Similar questions

Issue encountered during Firebase deployment: Module '@babel/runtime/helpers/builtin/interopRequireDefault' not found

The comparison between dynamically adding elements through Javascript and hiding them using CSS

SyntaxError was not caught and an unexpected token export occurred at line 2371 in the popper.js file

What could be causing my YouTube code to malfunction with certain playlists?

Issues with Select2 Ajax functionality not functioning as intended

The visibility of content that flickers on the webpage should be hidden with the display: none property during loading

The Ajax request is not being triggered when using a different form submit method

Having Difficulty Configuring Async Request Outcome

What steps are involved in integrating OpenCV into a JavaScript project?

Is it possible to incorporate npm modules into a browser and utilize them locally on a personal computer?

Cross domain Ajax POST requests using CodeIgniter and AjaxBy utilizing CodeIgn

Live Node.js and Next.js apps experiencing issues with functioning websockets

Retrieving and securely storing information using fetch() on authenticated REST services

Creating an array using Vue.js

The Chrome debugger will pause execution at a function without needing a DOM break point

Can a variable containing HTML code be iterated through with a loop?

What causes the generation of an outdated object when utilizing the let and new keywords to create a new object within a service function?

How does a web crawler determine which elements to click on when navigating a webpage?

Can an in-progress NPM package be tested using NPX?

Is there a way in Angular to activate the contenteditable feature through a controller?