Mean stack web应用程序的基于angular色的访问控制

我正在处理一个平均堆栈web应用程序,其中包含基于logging的用户angular色的差异访问。 有很less不同的angular色,如pipe理员政府志愿者等。

1.如何根据angular色pipe理前端?

目前我正在为每个angular色设置全局标志,如isAdmin,isVolunteer,isGovt等,并根据他们的价值,我能够显示不同的用户界面使用data-ng-if = "Global.isAdmin"

这是无稽之谈吗? 如果不是,请提出正确的方法来处理用户界面。

2.如果用户没有授权,如何pipe理后端并redirect路线?

目前我正在尝试使用angular度权限rbac,但仍然无法在我的应用程序中成功地使用这些。 任何人都可以告诉我为基于angular色的访问控制平均堆栈web应用程序的最佳做法。

当试图使用angular度权限时 ,我无法将创build的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; }); } ]); 

如何在路由文件中链接上面的configurationangular色

 $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 } }); 

Solutions Collecting From Web of "Mean stack web应用程序的基于angular色的访问控制"

从你的代码示例我猜你正在使用mean.io.

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

首先,我将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色。

技巧来自我的自定义模块的public / routes / report.js文件,在那里我按angular色过滤视图。

 '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) } } }); } ]); 

如果用户未经身份validation,他将被redirect到login页面。 如果他的angular色错了,他会被redirect到主页。

这种方法是基于文章模块。 希望能帮助到你。