Блог

У меня есть приложение, которое использует Spring Security для аутентификации / авторизации на стороне сервера, Spring MVC для конечных точек на стороне сервера REST и AngularJS для просмотра.

На стороне сервера я реализовал все фильтры, необходимые для доступа ко всем этим конечным точкам REST, на основе прав пользователя. Мой вопрос в том, как мне следует подходить к созданию видимых / скрытых элементов html на основе аутентифицированных прав ПОЛЬЗОВАТЕЛЯ?

Например, у меня есть в представлении 3 кнопки (button1, button2, button3). Каждая кнопка имеет соответствующее ПРАВО ПОЛЬЗОВАТЕЛЯ, что должно сделать их видимыми / скрытыми. Давайте назовем эти права USER_RIGHT1, USER_RIGHT2, USER_RIGHT3.

Если у пользователя есть правильный USER_RIGHT1, он должен видеть в представлении button1, если у него есть правильный USER_RIGHT2, он должен видеть в представлении button2 и так далее.

Мой подход заключался в том, чтобы иметь список аутентифицированных прав пользователя в клиенте и сделать что-то в следующем примере:

 <div ng-if="rights contains USER_RIGHT1">
    <button name="button1".... />
</div>
<div ng-if="rights contains USER_RIGHT2">
    <button name="button2".... />
</div>
  

Я не уверен, должен ли список прав аутентифицированного пользователя быть в клиенте.

Как мне подойти к этой проблеме? Правильно ли я это делаю?

Мой подход в основном такой, какой вы предлагаете.

У вас может быть фабрика, которая хранит массив разрешений пользователя и имеет функцию для проверки наличия разрешения в массиве:

 .factory('Auth', function() {

var permissions = [];

return {
    allowed : function(permission) {

        return _.contains(permissions, permission);
    }
};});
  

Затем у вас может быть директива, которая показывает / скрывает элемент с помощью сервиса:

 .directive('allowed', function(Auth){

    return {

        link : function(scope, elem, attr) {

            if(!Auth.allowed(attr.allowed)){
                elem.hide();
            }
        }
    };
});
  

Итак, в ваших представлениях вам нужно только сделать:

 <div allowed="permission_name"> </div>
  

Безопасность на клиенте, т. е. в браузере, практически бесполезна. Однако он должен присутствовать, чтобы обычный пользователь не мог видеть то, чего он не должен, однако сервер должен быть конечным местом, где обеспечивается безопасность.

Я бы создал быструю директиву для отображения / скрытия или компонентов пользовательского интерфейса и создал службу аутентификации для выполнения фактической логики, чтобы определить, имеет ли пользователь правильные права.

Я нахожусь на 60% пути, написав подробную статью об авторизации в AngularJS в своем блоге. Я бы проверил примерно через неделю, и я должен это сделать — это также может помочь вам с авторизацией маршрута.

ОБНОВЛЕНИЕ: сообщение в блоге об авторизации и безопасности angular route можно найти здесь

По сути, служба авторизации авторизует пользователя с помощью вашей серверной службы, а затем сохраняет их права на приложения.

Затем директива будет использовать эту службу, чтобы определить, имеет ли пользователь достаточно прав для просмотра компонента пользовательского интерфейса.

Я не тестировал приведенный ниже код, поэтому вам может потребоваться его отладка.

     angular.module('myApp').factory('authService', [
    function () {
        var loggedInUser,
            login = function (email, password) {
                //call server and rights are returned
                //loggedInUser is assigned
            },
            hasSecurityRoles = function (requiredRoles) {
                var hasRole = false,
                    roleCheckPassed = false,
                    loweredRoles;
                if (loggedInUser === undefined) {
                    hasRole = false;
                } else if (loggedInUser !== undefined amp;amp; requiredRoles === undefined) {
                    hasRole = true;
                } else if (loggedInUser !== undefined amp;amp; requiredRoles !== undefined) {
                    if (requiredRoles.length === 0) {
                        hasRole = true;
                    } else if (loggedInUser.permittedActions === undefined) {
                        hasRole = false;
                    } else {
                        loweredRoles = [];
                        angular.forEach(loggedInUser.permittedActions, function (role) {
                            loweredRoles.push(role.name.toLowerCase());
                        });

                        // check user has at least one role in given required roles
                        angular.forEach(requiredRoles, function (role) {
                            roleCheckPassed = roleCheckPassed || _.contains(loweredRoles, role.toLowerCase());
                        });

                        hasRole = roleCheckPassed;
                    }
                }

                return hasRole;
            };

        return {
            login: login,
            hasSecurityRoles: hasSecurityRoles
        };
    }
]);

    angular.module('myApp').directive('visibleToRoles', [
        'authService',
        function (authService) {
            return {
                link: function (scope, element, attrs) {
                    var makeVisible = function () {
                            element.removeClass('hidden');
                        },
                        makeHidden = function () {
                            element.addClass('hidden');
                        },
                        determineVisibility = function (resetFirst) {
                            if (resetFirst) {
                                makeVisible();
                            }

                            if (authService.hasSecurityRoles(roles)) {
                                makeVisible();
                            } else {
                                makeHidden();
                            }
                        },
                        roles = attrs.visibleToRoles.split(',');


                    if (roles.length > 0) {
                        determineVisibility(true);
                    }
                }
            };
        }
    ]);
  

Затем вы могли бы использовать его следующим образом

 <div visible-to-role="admin,usermanager">.....</div>
  

Вместо того, чтобы иметь жестко запрограммированный список в ваших шаблонах / страницах, вы можете получить список прав аутентифицированного пользователя с сервера и загрузить его в свою область, а затем сделать то же самое, что вы делаете. Если вы используете ui-router, это возможно с помощью свойства resolve (то есть предварительной загрузки определенных данных, возможно, с сервера перед вызовом контроллера).

Таким образом, вы можете получить права только для пользователя, который просматривает страницу, а не жестко прописывать все права в клиенте.