如何在meanjs中複製管理儀表板以創建用戶目錄

Question

我是meanjs的新手，但我正在嘗試創建一個簡單的應用程序，用戶可以在其中互相連接。

現在我只是想實現一個功能，用戶可以通過搜索看到對方，沒有別的，但我一直運行到403錯誤。我試圖通過複製構成管理員「管理用戶」視圖的文檔來修復它。

我不想給每個人'管理員'的角色，所以我給用戶添加了一個新的政策，只給他們'獲得'的權限。我還爲管理員文件修改的普通用戶添加了新的路由，視圖和控制器。

它工作得很好，但我仍然無法讓系統在非管理角色下登錄時允許訪問新的userDirectory視圖。我認爲它與auth.interceptor.client.service.js文件和modules/core/client/app/init.js文件有關，而且我所做的新文件提供了$ state，但我嘗試過修改它們，它仍然在我的應用程序的正文中拋出/禁止視圖。

我不知道我還能做什麼。任何幫助將不勝感激。

該應用程序開始於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（從模塊/用戶/客戶端/視圖/管理改性視圖/列表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>

我的控制器（從模塊/用戶/客戶機/控制器/管理/列表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){...}

希望這會有所幫助，我也是新來的整體平均堆棧，甚至不知道這是不是最好的解決辦法，但它會奏效。

編輯：

當你創建你需要將它添加到客戶端的航線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' 
     } 
     })