meanjsで管理ダッシュボードを複製してユーザーディレクトリを作成するには

Question

私はmeanjsには新しいですが、現在ユーザーが互いに接続できる単純なアプリケーションを作成しようとしています。

今は、ユーザーが検索で検索できるだけの機能を実装したいだけですが、403エラーが発生しています。私は管理者の管理ユーザーのビューを構成する文書を複製することでそれを修正しようとしました。

「管理者」の役割を全員に与えたくないので、ユーザーに「get」権限しか与えられていない新しいポリシーを追加しました。また、管理者ファイルから変更された、通常のユーザー用の新しいルート、ビュー、およびコントローラーを追加しました。

これはかなりうまくいっていますが、管理者以外の役割でログインしたときに、新しいuserDirectoryビューにアクセスできるようにシステムを取得できません。私はauth.interceptor.client.service.jsファイルとモジュール/ 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' 
 
     } 
 
    }); 
 
    } 
 
]);

（モジュール/ユーザー/サーバー/ルート/ admin.server.routes.jsから変更された）私の新しいroute.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のための私の新しいポリシーが（修正

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

：モジュール/ユーザー/サーバー/ポリシー/ admin.server.policy.js）から

Answer 1

私はそれを行う最も簡単な方法は、ユーザーだけがそのデータを取得するためのサービスにアクセスして作成できる新しいルートをサーバーに追加することだと思います。

（これは、DBからデータを取得するための唯一のサービスです、あなたが任意のビュー/コントローラでそれを使用するか、ユーザー/管理者のみがアクセスされ、新しいビューを作成することができます）

あなたのモジュールで（クライアント側）サーバーを取得/の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/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); 
}; 

でリクエストを処理modulses/yourModule/server/policies

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

でアクセス許可を追加します。

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