angularjs - Mean stack Web 应用程序基于角色的访问控制

Question

我正在开发一个平均堆栈 Web 应用程序，其中包含基于登录用户 Angular 色的差异访问。有几种不同的 Angular 色，例如管理员、政府、志愿者等。

<强>1。如何根据 Angular 色来管理前端？

目前，我正在为每个 Angular 色设置全局标志，例如 isAdmin、isVolunteer、isGovt 等，并根据它们的值，我能够使用 data-ng-if = "Global.isAdmin" 显示不同的 UI

这种做法正确吗？如果没有，请建议处理 UI 的正确方法。

<强>2。如果用户没有授权，如何管理后端并重定向路由？

目前我正在尝试使用 Angular 权限和rbac，但仍然无法在我的应用程序中成功使用它们。 谁能告诉我平均堆栈网络应用程序基于 Angular 色的访问控制的最佳实践。

在尝试使用 Angular 权限时，我无法将创建的 Angular 色链接到路由文件。

这是 Angular 色模块。

angular.module('mean.users', ['permission'])
.run(['permission', 'Global', '$q',
    function(Permission, Global, $q) {
        console.log('not anonumous');
        Permission
            .defineRole('anonymous', function(stateParams) {
                var deferred = $q.defer();
                if (Global.user) {
                    deferred.resolve();
                } else {
                    deferred.reject();
                }
                return deferred.promise;
            })
            .defineRole('admin', function(stateParams) {
                if (Global.isAdmin) {
                    deferred.resolve();
                } else {
                    deferred.reject();
                }
                return deferred.promise;
            })
            .defineRole('govt', function(stateParams) {
                if (Global.isGovt) {
                    deferred.resolve();
                } else {
                    deferred.reject();
                }
                return deferred.promise;
            })
            .defineRole('volunteer', function(stateParams) {
                if (Global.isVolunteer) {
                    deferred.resolve();
                } else {
                    deferred.reject();
                }
                return deferred.promise;
            });

    }
]);

如何在路由文件中链接上述配置的 Angular 色

$stateProvider
        .state('create user', {
            url: '/users/create',
            templateUrl: 'users/views/create.html',
            resolve: {
                loggedin: checkLoggedin
            }
        })
        .state('all users', {
            url: '/users/list',
            templateUrl: 'users/views/list.html',
            data: {
                permissions: {
                     only: ['admin'],
                    redirectTo: 'home'
                }
            }
        })
        .state('show user', {
            url: '/users/:userId/view',
            templateUrl: 'users/views/view.html',
            resolve: {
                loggedin: checkLoggedin
            }
        })
        .state('edit user', {
            url: '/users/:userId/edit',
            templateUrl: 'users/views/edit.html',
            data: {
                permissions: {
                     only: ['admin']
                }
            }
        })
        .state('myprofile', {
            url: '/users/:userId/me',
            templateUrl: 'users/views/myprofile.html',
            resolve: {
                loggedin: checkLoggedin
            }

        });

Answer 1

从您的代码示例中我猜您正在使用mean.io。

这是我在mean.io 中基于 Angular 色的前端访问控制方法。

首先，我将 Angular 色添加到一些用户，以便它们存在于数据库中并且我可以使用它们。

$ mean user a@example.com --addRole production
$ mean user b@example.com --addRole sales

然后，我有 2 条路线要添加到菜单中。在我的自定义模块的 app.js 中，我按 Angular 色过滤此路由，以便该链接不会向其他 Angular 色显示:

Report.menus.add({
  roles: ['production'],
  title: 'Production reports',
  link: 'production reports'
});
Report.menus.add({
  roles: ['sales'],
  title: 'Sales reports',
  link: 'sales reports'
});

当然，这还不足以限制前端的访问。您可以轻松指向 http://localhost:3000/#!/report/sales无论您是否具有销售 Angular 色，您都会看到销售报告。

这个技巧来 self 的自定义模块的 public/routes/report.js 文件，我在其中按 Angular 色过滤 View 。

'use strict';

angular.module('mean.report').config(['$stateProvider',
  function($stateProvider) {
    // Check if user has role
    var checkUserRole = function(role, $q, $timeout, $http, $location) {
      // Initialize a new promise
      var deferred = $q.defer();

      // Make an AJAX call to check if the user is logged in and get user data including roles
      $http.get('/loggedin').success(function(user) {
        // Authenticated
        if (user !== '0' && (user.roles.indexOf(role) > -1 || user.roles.indexOf('admin') > -1)) $timeout(deferred.resolve);

        // Not Authenticated
        else {
          $timeout(deferred.reject);
          $location.url('/auth/login');
        }
      });

      return deferred.promise;
    };

    $stateProvider.state('report', {
      url: '/report',
      templateUrl: 'report/views/index.html'
    })
    .state('production reports', {
      url: '/report/production',
      templateUrl: 'report/views/production.html',
        resolve: {
          loggedin: function($q, $timeout, $http, $location) {
                return checkUserRole('production', $q, $timeout, $http, $location)
            }
        }
    })
    .state('sales reports', {
      url: '/report/sales',
      templateUrl: 'report/views/sales.html',
        resolve: {
          loggedin: function($q, $timeout, $http, $location) {
                return checkUserRole('sales', $q, $timeout, $http, $location)
            }
        }
    });
  }
]);

如果用户未经身份验证，他将被重定向到登录页面。如果他的 Angular 色错误，他会被重定向到主页。

这种方法基于文章模块。希望对您有所帮助。