What is the best location for implementing role-based authentication in a MeanJS application?

Question

What is the best location for implementing role-based authentication in a MeanJS application?

I am working with a meanJS starter template that includes a yeoman generator. I'm trying to figure out where I can add specific permissions to my modules. For example,

'use strict';

// Configuring the Articles module
angular.module('adminpanel').run(['Menus',
    function(Menus) {
        // Set top bar menu items
        //Menus.addMenuItem('topbar', 'admin panel', 'adminpanel/', 'adminpanel');

        Menus.addMenuItem('topbar', 'Admin Panel', 'adminpanel', 'dropdown', '/buildings(/create)?');
        Menus.addSubMenuItem('topbar', 'adminpanel', 'List Collections', 'adminpanel/collections');
    }
]);

and when it comes to routes: 'use strict';

//Setting up route
angular.module('adminpanel').config(['$stateProvider',
    function($stateProvider) {
        // Admin panels state routing
        $stateProvider.
        state('listCollections', {
            url: '/adminpanel/collections',
            templateUrl: 'modules/adminpanels/views/list-collections.client.view.html'
        }).
        state('showCollection', {
            url: '/adminpanel/collections/:collectionName',
            templateUrl: 'modules/adminpanels/views/show-collection.client.view.html'
        }).
        state('showCollectionItem', {
            url: '/adminpanel/collections/:collectionName/:itemId',
            templateUrl: 'modules/adminpanels/views/show-item.client.view.html'
        });
    }
]);

Are these the appropriate places to implement role-based authentication on the client side, while also taking measures on the server-side (which I have already done)?

Does anyone know how I can incorporate an option like 'admin.hasPermission' into the Menus.(some function) without causing any issues? Any recommended resources for this type of customization?

Thank you for your assistance!

javascript angularjs roles meanjs

Answer 1

Answer №1

In my opinion, it is not wise to have authentication and authorization code on both the client side and server side. It is best practice to keep them only on the server side.

By having your authentication and authorization code on the client side as well, you are essentially exposing your mechanisms to anyone who can access the client. This could potentially lead to security vulnerabilities that attackers could exploit on both the client and server sides.

I strongly believe that authentication and authorization logic should be strictly limited to the server side. This way, if I were to go up against a skilled individual, it would at least make their task more challenging.

If you absolutely must have some form of validation on the client side, one approach could be to create a wrapper around the $http service. This wrapper could maintain a list of permissions for different roles, and all AJAX requests would need to go through this wrapper where you can check if they are allowed. If the request is permitted, you can proceed with the $http call, otherwise, an error can be thrown.

Answer 2

In my opinion, it is not wise to have authentication and authorization code on both the client side and server side. It is best practice to keep them only on the server side.

By having your authentication and authorization code on the client side as well, you are essentially exposing your mechanisms to anyone who can access the client. This could potentially lead to security vulnerabilities that attackers could exploit on both the client and server sides.

I strongly believe that authentication and authorization logic should be strictly limited to the server side. This way, if I were to go up against a skilled individual, it would at least make their task more challenging.

If you absolutely must have some form of validation on the client side, one approach could be to create a wrapper around the $http service. This wrapper could maintain a list of permissions for different roles, and all AJAX requests would need to go through this wrapper where you can check if they are allowed. If the request is permitted, you can proceed with the $http call, otherwise, an error can be thrown.

Answer 3

Answer №2

If you are using version 0.4.0, there is a new feature in the client config that allows you to control the visibility of menu entries:

By setting isPublic: false and defining a specific roles array, you can restrict access to certain users:

    // Example of adding a dropdown listCollections item
    Menus.addSubMenuItem('topbar', 'adminpanel', {
        title: 'listCollections',
        isPublic: false,
        roles:['admin'],
        state: 'adminpanel.listCollections'
    });

The logic for this implementation can be found in the core module (menu.client.services.js):

// Function for determining rendering decision 
    var shouldRender = function(user) {
        if (user) {
            if (!!~this.roles.indexOf('*')) {
                return true;
            } else {
                for (var userRoleIndex in user.roles) {
                    for (var roleIndex in this.roles) {
                        if (this.roles[roleIndex] === user.roles[userRoleIndex]) {
                            return true;
                        }
                    }
                }
            }
        } else {
            return this.isPublic;
        }

        return false;
    };

You may want to explore version 0.4.0 or take a closer look at the code to implement this feature yourself.

Answer 4

If you are using version 0.4.0, there is a new feature in the client config that allows you to control the visibility of menu entries:

By setting isPublic: false and defining a specific roles array, you can restrict access to certain users:

    // Example of adding a dropdown listCollections item
    Menus.addSubMenuItem('topbar', 'adminpanel', {
        title: 'listCollections',
        isPublic: false,
        roles:['admin'],
        state: 'adminpanel.listCollections'
    });

The logic for this implementation can be found in the core module (menu.client.services.js):

// Function for determining rendering decision 
    var shouldRender = function(user) {
        if (user) {
            if (!!~this.roles.indexOf('*')) {
                return true;
            } else {
                for (var userRoleIndex in user.roles) {
                    for (var roleIndex in this.roles) {
                        if (this.roles[roleIndex] === user.roles[userRoleIndex]) {
                            return true;
                        }
                    }
                }
            }
        } else {
            return this.isPublic;
        }

        return false;
    };

You may want to explore version 0.4.0 or take a closer look at the code to implement this feature yourself.

What is the best location for implementing role-based authentication in a MeanJS application?

Answer №1

Answer №2

Similar questions

Storing the current date() in JSON format using AngularJS

Creating an array of a specific field within a JSON string using the collect() method of objx is a straightforward process

The type 'Navigator' does not have the property 'userAgentData' in its definition

What is the procedure for modifying the filter column position within a ui-grid interface?

Implementing Dropzone in an Angular MVC5 project

Retrieve the value within the $scope when making an HTTP get request, but ensure it is only called once the client code has

Ways to eliminate a specific Chip from Autocomplete outside of material UI

Tips for extracting values from a PHP array using JavaScript

PHP: variables malfunctioning post implementation of "if" statement

Issue with ng-repeat causing input inside repeater to become blurry in AngularJS

Using jQuery to assign a specific value to all select boxes

Conceal the Submit button upon completing the form submission using the load method

What is the best way to integrate JavaScript with my HTML command box?

Animating Page Transitions using Angular 2.0 Router

trouble concerning the responsiveness of a jQuery popup

Vue.js and axios causing an empty array after the page is refreshed

Exploring component method variables with Jest testing

Ways to showcase every resource from an API in React JS

Tips for concealing a tab upon selecting an option from a dropdown menu

The backend error message isn't triggering an alert!