Как реплицировать панель управления admin в средстве для создания каталога пользователя

Question

Я новичок в meanjs, но в настоящее время я пытаюсь создать простое приложение, в котором пользователи могут подключаться друг к другу.

Прямо сейчас я просто хочу реализовать функцию, в которой пользователи могут искать друг друга путем поиска и ничего другого, но я продолжаю сталкиваться с ошибкой 403. Я попытался исправить это, реплицируя документы, которые составляют представление администратора «управлять пользователями».

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

Он работал очень хорошо, но я до сих пор не могу заставить систему разрешить доступ к новому представлению userDirectory при входе в систему под роль, отличной от admin. Я думаю, что это имеет какое-то отношение к файлу auth.interceptor.client.service.js и к файлу modules/core/client/app/init.js и к состоянию $, предоставляемому новыми файлами, которые я сделал, но я попытался измените их, и он все еще бросает/запрещенный вид в теле моего приложения.

Я в недоумении за то, что еще я могу сделать. Любая помощь будет принята с благодарностью.

приложение начинается с точки зрения home.client.view.html:

<section ng-controller="HomeController"> 
 

 
    </div> 
 
    <div class="jumbotron text-center" ng-hide="authentication.user"> 
 
    <div class="row"> 
 
     <div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-xs-12"> 
 
     <img alt="MEAN.JS" class="img-responsive text-center" src="modules/core/client/img/brand/Logo.png" /> 
 
     </div> 
 
    </div> 
 
    <br> 
 
    <div class="row"> 
 
     <p class="lead"> 
 
     An app 
 
     </p> 
 
    </div> 
 
    <div class="row"> 
 
     <p> 
 
     <!-- <a class="btn btn-primary btn-lg" href="http://meanjs.org" target="_blank">Learn more</a> --> 
 
     </p> 
 
    </div> 
 
    </div> 
 
    <div ng-if="authentication.user"> 
 
    <h2>Congratulations! You are logged in.</h2> 
 
    <div ng-include="'/modules/users/client/views/user/user-directory.client.view.html'"></div> 
 
    <!-- <div ng-include="'/api/users'"></div> --> 
 

 
    </div> 
 

 
</section>

Вот мой взгляд на userDirectory (модифицированный из модулей/пользователей/клиент/Views/администратор/список-users.client.view.html):

<section ng-controller="UserDirectoryController"> 
 
    <div class="page-header"> 
 
    <div class="row"> 
 
     <div class="col-md-4"> 
 
     <h1>Users</h1> 
 
     </div> 
 
     <div class="col-md-4" style="margin-top: 2em"> 
 
     <input class="form-control col-md-4" type="text" ng-model="search" placeholder="Search" ng-change="figureOutItemsToDisplay()" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="list-group"> 
 
    <a ng-repeat="user in pagedSearchItems" ui-sref="users.user({userId: user._id})" class="list-group-item"> 
 
     <h4 class="list-group-item-heading" ng-bind="user.username"></h4> 
 
     <p class="list-group-item-text" ng-bind="user.email"></p> 
 
    </a> 
 
    </div> 
 

 
    <pagination boundary-links="true" max-size="8" items-per-page="itemsPerPage" total-items="filterLength" ng-model="currentPage" ng-change="pageChanged()"></pagination> 
 
</section>

My Controller (редактировался модулей/пользователей/клиент/контроллеры/админ/список-users.client.controller.js):

'use strict'; 
 

 
angular.module('users.user').controller('UserDirectoryController', ['$scope', '$filter', 'User', 
 
    function ($scope, $filter, User) { 
 
    User.query(function (data) { 
 
     $scope.users = data; 
 
     $scope.buildPager(); 
 
    }); 
 

 
    $scope.buildPager = function() { 
 
     $scope.pagedSearchItems = []; 
 
     $scope.itemsPerPage = 15; 
 
     $scope.currentPage = 1; 
 
     $scope.figureOutItemsToDisplay(); 
 
    }; 
 

 
    $scope.figureOutItemsToDisplay = function() { 
 
     $scope.filteredItems = $filter('filter')($scope.users, { 
 
     $: $scope.search 
 
     }); 
 
     $scope.filterLength = $scope.filteredItems.length; 
 
     var begin = (($scope.currentPage - 1) * $scope.itemsPerPage); 
 
     var end = begin + $scope.itemsPerPage; 
 
     $scope.pagedSearchItems = $scope.filteredItems.slice(begin, end); 
 
    }; 
 

 
    $scope.pageChanged = function() { 
 
     $scope.figureOutItemsToDisplay(); 
 
    }; 
 
    } 
 
]);

Моя_служба (редактировался модулей/пользователей /client/services/users.client.service.js):

'use strict'; 
 

 
// Users service used for communicating with the users REST endpoint 
 
angular.module('users').factory('User', ['$resource', 
 
    function ($resource) { 
 
    return $resource('api/userDirectory', {}, { 
 
     update: { 
 
     method: 'PUT' 
 
     } 
 
    }); 
 
    } 
 
]); 
 

 
//TODO this should be Users service 
 
angular.module('users.user').factory('User', ['$resource', 
 
    function ($resource) { 
 
    return $resource('api/userDirectory/:userId', { 
 
     userId: '@_id' 
 
    }, { 
 
     update: { 
 
     method: 'PUT' 
 
     } 
 
    }); 
 
    } 
 
]); 
 

 
angular.module('users.user').factory('User', ['$resource', 
 
    function ($resource) { 
 
    return $resource('api/userDirectory/:userId', { 
 
     userId: '@_id' 
 
    }, { 
 
     update: { 
 
     method: 'PUT' 
 
     } 
 
    }); 
 
    } 
 
]);

Моего новый route.js (модифицированный из модулей/пользователей/сервера/маршрутов/admin.server.routes.js):

'use strict'; 
 

 
/** 
 
* Module dependencies. 
 
*/ 
 
var userPolicy = require('../policies/userDirectory.server.policy'), 
 
    userDirectory = require('../controllers/userDirectory.server.controller'); 
 

 
module.exports = function (app) { 
 
    // User route registration first. Ref: #713 
 
    require('./users.server.routes.js')(app); 
 

 
    // Users collection routes 
 
    app.route('/api/userDirectory') 
 
    .get(userPolicy.isAllowed, userDirectory.list); 
 

 
    //Single user routes 
 
    app.route('/api/userDirectory/:userId') 
 
    .get(userPolicy.isAllowed, userDirectory.read); 
 

 
    // Finish by binding the user middleware 
 
    app.param('userId', userDirectory.userByID); 
 
};

И, наконец, моя новая политика userDirectory (Модифицированное от модулей/пользователей/сервера/политики/admin.server.policy.js):

'use strict'; 
 

 
/** 
 
* Module dependencies. 
 
*/ 
 
var acl = require('acl'); 
 

 
// Using the memory backend 
 
acl = new acl(new acl.memoryBackend()); 
 

 
/** 
 
* Invoke User Permissions 
 
*/ 
 
exports.invokeRolesPolicies = function() { 
 
    acl.allow([{ 
 
    roles: ['user'], 
 
    allows: [{ 
 
     resources: '/api/userDirectory', 
 
     permissions: ['post', 'get'] 
 
    }, { 
 
     resources: '/api/userDirectory/:userId', 
 
     permissions: ['post', 'get'] 
 
    }] 
 
    }]); 
 
}; 
 

 
/** 
 
* Check If User Policy Allows 
 
*/ 
 
exports.isAllowed = function (req, res, next) { 
 
    var roles = (req.user) ? req.user.roles : ['guest']; 
 

 
// Check for user roles 
 
    acl.areAnyRolesAllowed(roles, req.route.path, req.method.toLowerCase(), function (err, isAllowed) { 
 
    if (err) { 
 
     // An authorization error occurred. 
 
     return res.status(500).send('Unexpected authorization error'); 
 
    } else { 
 
     if (isAllowed) { 
 
     // Access granted! Invoke next middleware 
 
     return next(); 
 
     } else { 
 
     return res.status(403).json({ 
 
      message: 'User is not authorized' 
 
     }); 
 
     } 
 
    } 
 
    }); 
 
};

Answer 1

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

(Это только сервис для получения данных из БД, вы можете использовать его в любой вид/контроллер, или создать новый вид, который доступен только для пользователей/администраторов)

В вашем модуле (на стороне клиента) создать службу для выполнения HTTP POST/получить на сервере:

(function() { 
'use strict'; 
angular 
    .module('yourModule') 
    .factory('UserListService', function($http) { 
    var routes = {}; 
    routes.getUserList = function(username) { 
     return $http.post('/api/userlist', username); //you can do a 'post' to search for one username or just 'get' to see all users. 
    }; 
    return routes; 
    } 
); 
})(); 

, а затем в modulses/yourModule/server/routes добавить маршрут:

app.route('/api/userlist').all(yourModulePolicy.isAllowed) 
.post(yourModule.getUserList); //get or post its up to you 

не забудьте добавить разрешения в modulses/yourModule/server/policies

roles: ['user'], 
allows: [{ 
    resources: '/api/userlist', 
    permissions: ['post'] //get or post 
}] 

затем обработать запрос в modulses/yourModule/server/controllers

exports.getUserList = function(req, res) { 
    var name_to_search = req.body.username; 
    //here you can query the database for all users or the name you 
    //received in the post. 
    //NOTE: if you query the user DB there can be sensitive information 
    //such as the hashed password etc, make sure you delete that here 
    //before you respond with the user/user list 
    res.jsonp(user_list); 
}; 

после этого вы можете использовать информацию о пользователях в контроллере на стороне клиента, как это:

UserListService.getUserList({ 
    username: 'john' 
}).then(function(data) { 
    vm.userlist = data.data; 
}); 

Убедитесь в том, ввести UserListService в контроллер и передать его функции контроллера:

YourController.$inject = ['UserListService'];

и

function YourController(UserListService){...}

Надеется, что это помогает, я тоже новичку в целом среднего стеку, даже не знаю, если это лучшее решение, но он будет работать.

EDIT:

При создании нового представления на стороне клиента с контроллером вам необходимо добавить его в стороне клиента маршрутов в modules/yourModule/client/config/yourModule.client.routes.js

.state('your.state', { 
     url: '-yourUrl', 
     templateUrl: 'modules/yourModule/client/views/user-list.client.view.html', 
     controller: 'YourController', 
     controllerAs: 'vm', 
     data: { 
      roles: ['user', 'admin'], 
      pageTitle: 'User List' 
     } 
     })