Wie repliziere ich das Admin-Dashboard in Meanjs, um ein Benutzerverzeichnis zu erstellen

Question

Ich bin neu zu Meanjs, aber ich versuche derzeit, eine einfache App zu erstellen, wo Benutzer miteinander verbinden können.

Im Moment möchte ich nur eine Funktion implementieren, wo Benutzer einander durch Suche und nichts anderes suchen können, aber ich laufe in einen 403 Fehler. Ich habe versucht, es zu beheben, indem ich die Dokumente repliziere, die die Ansicht "Benutzer verwalten" bilden.

Ich wollte nicht jedem die 'admin' Rolle geben, also habe ich eine neue Richtlinie für Benutzer hinzugefügt, wo sie nur 'get' Berechtigungen bekommen. Ich habe auch eine neue Route, View und Controller für reguläre Benutzer hinzugefügt, die von den Admin-Dateien geändert wurde.

Es hat sehr gut funktioniert, aber ich kann immer noch nicht das System Zugriff auf die neue Benutzerverzeichnis-Sicht zu ermöglichen, wenn in einer Nicht-Administrator-Rolle angemeldet. Ich denke, dass es etwas mit der Datei auth.interceptor.client.service.js und der Datei modules/core/client/app/init.js zu tun hat und dass der $ -Zustand von den neuen Dateien bereitgestellt wird, die ich erstellt habe, aber ich habe versucht ändere sie und es ist immer noch die/verbotene Ansicht im Körper meiner App.

Ich bin ratlos, was ich sonst noch tun kann. Jede Hilfe würde sehr geschätzt werden.

Die App startet mit home.client.view.html Ansicht:

<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>

hier meiner Meinung nach für die userdirectory ist (modifiziert nach modules/Benutzer/Client/Ansichten/admin/list-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>

Mein Controller (modifiziert nach modules/Benutzer/Client/controllers/admin/list-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(); 
 
    }; 
 
    } 
 
]);

Mein Service (modifiziert nach modules/Benutzer /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' 
 
     } 
 
    }); 
 
    } 
 
]);

Mein neues route.js (modifiziert nach modules/Benutzer/Server/Routen/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); 
 
};

Und schließlich meine neue Politik für userdirectory (modifizierte von modules/Benutzer/Server/Politik/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

Ich denke, der einfachste Weg ist es, dem Server eine neue Route hinzuzufügen, auf die nur Benutzer zugreifen und einen Dienst erstellen können, um diese Daten abzurufen.

(Dies ist nur ein Service für die Daten aus der DB bekommen, können Sie es in einem beliebigen Ansicht/Controller verwenden oder eine neue Ansicht erstellen, die die Benutzer/Administratoren nur zugänglich ist)

In Ihrem Modul (Client-Seite) erstellen einen Dienst einen http Post auszuführen/get an den Server:

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

und dann in modulses/yourModule/server/routes fügen Sie die Route:

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

nicht vergessen fügen Sie Berechtigungen in modulses/yourModule/server/policies

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

dann in die Anfrage behandeln 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); 
}; 

danach Sie die Benutzerinformationen in der Client-Seite-Controller wie folgt verwenden können:

zu

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

Stellen Sie sicher, Den UserListService in den Controller einspeisen und an die Controller-Funktion übergeben:

YourController.$inject = ['UserListService'];

und

function YourController(UserListService){...}

hoffte, das hilft, ich bin auch neu in dem ganzen mittleren Stapel, weiß nicht, auch wenn dies die beste Lösung ist, aber es wird funktionieren.

EDIT:

Wenn Sie eine neue Sicht auf der Client-Seite erstellen mit einem Controller Sie es an die Client-Seite Routen hinzufügen müssen in 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' 
     } 
     })