0
Hallo in meiner Anwendung, wenn ein Benutzer sich anmeldet, werden seine Daten vom Server zusammen mit ihren zugewiesenen Rollen zurückgegeben, wobei jede zugewiesene Rolle ein Menü-Array ist. Dies ist ein Beispiel des zurückgegebenen Arrays nach einer erfolgreichen Anmeldung:Ladezustände dynamisch von localStorage mit ui-router laden
{
"user": {
"id": 1,
"username": "xxx",
"email_address": "[email protected]",
"roles": [
{
"id": 1,
"name": "Administrator",
"description": "Administrator Role",
"slug": "administrator",
"menus": [
{
"id": 1,
"parent_id": 0,
"name": "Users",
"icon": "fa-users",
"description": "Users Menu Group",
"route": "main.users.view"
},
{
"id": 2,
"parent_id": 1,
"name": "New",
"icon": "fa-plus",
"description": "New User",
"route": "main.users.new"
},
{
"id": 3,
"parent_id": 1,
"name": "View",
"icon": "fa-th-list",
"description": "View All Users",
"route": "main.users.view"
},
{
"id": 4,
"parent_id": 1,
"name": "Edit",
"icon": "fa-pencil",
"description": "Edit User",
"route": "main.users.edit"
},
{
"id": 5,
"parent_id": 1,
"name": "Delete",
"icon": "fa-trash-o",
"description": "Delete User",
"route": "main.users.delete"
},
{
"id": 10,
"parent_id": 0,
"name": "Roles",
"icon": "fa-user-secret",
"description": "Roles Menu Group",
"route": "main.users.roles"
},
{
"id": 11,
"parent_id": 6,
"name": "New",
"icon": "fa-plus",
"description": "New Role",
"route": "main.roles.new"
},
{
"id": 12,
"parent_id": 6,
"name": "View",
"icon": "fa-th-list",
"description": "View All Roles",
"route": "main.roles.view"
},
{
"id": 13,
"parent_id": 6,
"name": "Edit",
"icon": "fa-pencil",
"description": "Edit Roles",
"route": "main.roles.edit"
},
{
"id": 14,
"parent_id": 6,
"name": "Delete",
"icon": "fa-trash-o",
"description": "Delete Roles",
"route": "main.roles.delete"
}
]
},
{
"id": 2,
"name": "Manager",
"description": "Manager Role",
"slug": "manager",
"menus": []
}
]
},
"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOi8vcGVzbGVhcm4uZGV2L2FwaS9sb2dpbiIsImlhdCI6MTQ2MjQ0NzY0MiwiZXhwIjoxNDYyNDUxMjQyLCJuYmYiOjE0NjI0NDc2NDIsImp0aSI6IjA1NGU1NzY2ZWM3ODBhZDJhNDY3YWY4MWFjZjI1Y2RkIiwic3ViIjoxfQ.WGr2wOMdS3ipcIXw0906o2hD_apIIM0aYmgDiu8Kiqw",
"status_code": "200"
}
Jetzt habe ich eine NavCtrl, die von jeder Rolle des Menü aus dem lokalen Speicher Abrufen und Analyse behandelt:
angular.module('app.ctrls')
.controller('NavCtrl', NavCtrl);
// Injecting Dependencies
NavCtrl.$inject = ['$state', '$rootScope', '$auth', '$localStorage'];
// Controller Function
function NavCtrl($state, $rootScope, $auth, $localStorage) {
var vm = this;
// Setting Variables and Properties
vm.user = {};
vm.roles = [];
vm.menus = [];
vm.scrollConfig = {
autoHideScrollbar: true,
theme: 'light',
advanced: {
updateOnContentResize: true
},
scrollInertia: 0
};
vm.topLevelFilter = function(item) {
return item.parent_id == 0;
};
/* Controller Initialiser */
vm.init = function() {
// Fetching menus from local storage
vm.user = $localStorage.getObject("user");
vm.roles = vm.user.roles;
vm.menus = vm.roles[0].menus;
}
/* initialising Controller */
vm.init();
}
Das Problem ich Recht habe, jetzt ist, wenn ich versuche, innerhalb jeder den Wert auf „put“ ui-SREF in einem ng-Wiederholung wie folgt aus:
<div snap-drawer class="side-bar-container" ng-controller="NavCtrl as nav">
<div class="side-bar">
<div class="header">
<img src="//:0" ng-src="images/logo.png" title="Xxx" alt="Xxx" class="logo" />
</div>
<div ng-slimscroll size="3px" opacity="0.3" class="ng-slimscroll">
<div class="list-group">
<a ui-sref="main.dashboard" ui-sref-active="active" class="list-group-item">
<i class="fa fa-home icon pull-left"></i>
<span class="title col-xs-7">Dashboard</span>
<i class="fa fa-chevron-right margin-top-5 pull-right"></i>
</a>
<!-- Looping through menus array with ng-repeat directive -->
<a ui-sref="main.users.roles" ui-sref-active="active" class="list-group-item" ng-repeat="item in nav.menus | filter: nav.topLevelFilter track by $index">
<i class="fa {{ item.icon }} icon pull-left"></i>
<span class="title col-xs-7 ">{{ item.name }}</span>
<i class="fa fa-chevron-right margin-top-5 pull-right"></i>
</a>
</div>
</div>
</div>
</div>
wenn ich versuche, eine Verbindung auch nach dem Aktualisieren des Browsers zu klicken bekomme ich folgende Fehler in meinem Browser-Konsole:
Error: Could not resolve 'main.users.roles' from state 'main'
Dies ist meine Routen-Datei:
angular.module('app.routes', [])
.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', '$authProvider', function($stateProvider, $locationProvider, $urlRouterProvider, $authProvider) {
$stateProvider
.state('auth', {
abstract: true
})
.state('auth.login', {
url: '/login',
views: {
'[email protected]': {
templateUrl: 'tpls/login.html',
controller: 'AuthCtrl',
controllerAs: 'vm'
}
},
data: {
cssClasses: 'login'
}
})
.state('auth.reset', {
url: '/password-reset',
views: {
'[email protected]': {
templateUrl: 'tpls/reset.html',
controller: 'AuthCtrl',
controllerAs: 'vm'
}
},
data: {
cssClasses: 'reset'
}
})
.state('main', {
abstract: true,
views: {
'[email protected]': {
templateUrl: 'tpls/main.html'
}
}
})
.state('main.dashboard', {
url: '/dashboard',
views: {
'[email protected]': {
templateUrl: 'tpls/dashboard.html',
controller: 'DashBoardCtrl',
controllerAs: 'vm'
}
}
})
.state('main.users', {
abstract: true,
url: '/users'
})
.state('main.users.roles', {
url: '/roles',
views: {
'[email protected]': {
templateUrl: 'tpls/roles.html',
controller: 'RolesCtrl',
controllerAs: 'vm'
}
}
});
$urlRouterProvider.otherwise("/login");
// Satellizer configuration that specifies which API
// route the JWT should be retrieved from
$authProvider.loginUrl = '/api/login';
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
Es wird auch ein Drop-Down, wo die Menüänderungen auf die aktuelle Rolle basieren (wählt aus einer Liste von Rollen zugewiesen dieser bestimmte Benutzer), wenn Sie darauf klicken.