具有動態控制器的角度+ ui角度動態選項卡

Question

我需要構建基於權限的管理儀表板。 html的標題由一些主要的hav組成，最后一個導航用於Settings 。 我使用angular-ui-router作為狀態。 當用戶進入“ Settings鏈接時，我需要從用戶有權訪問的服務器選項卡上傳。

我的州提供者

 $stateProvider
    .state('home', {
        url: "/",
        templateUrl: "templates/home/index.html"
    })
    .state('settings', {
        url: "/settings",
        controller: "SettingsController",
        templateUrl: "templates/home/settings.html",
    })
    .state('settings.users', {
        url: "/users",
        controller: "SettingsUsersController",
        templateUrl: "templates/home/settings/users.html",
    })
    .state('settings.roles', {
        url: "/roles",
        controller: "SettingsRolesController",
        templateUrl: "templates/home/settings/roles.html",
    });

SettingsController看起來像這樣：

app.controller('SettingsController', ['$scope', '$http',
    function($scope, $http) {
        $scope.tabs = [];

        $http({
            method: 'GET',
            url: '/api/menu/get'
        }).
        success(function(data, status, headers, config) {
            $scope.tabs = data;
        }).
        error(function(data, status, headers, config) {
            window.location = '/auth/login';
        });
    }
]);

示例服務器答案

[{
    "url": "settings.users",
    "title": "Users"
}, {
    "url": "settings.roles",
    "title": "Roles"
}]

我的settings.html

<div class="container">
  <ul class="nav nav-tabs nav-justified">
    <li ng-repeat="tab in tabs" ng-class="{active: $first}">
      <a href="{{tab.url}}">{{tab.title}}</a>
    </li>
  </ul>
</div>

如何在SettingsController加載$http端的第一個選項卡，也將它連接到相應的Controller？ 以及如何在不同狀態下切換活動標簽？

Answer 1

不知道是否可以動態定義路線，但您可以通過以下方式實現目標。

1. 定義應用的所有可能路線。
2. 沒有特定權限的用戶無法訪問它們（我使用這種方法 ）。
3. 加載用戶的權限。
4. 從這些權限構建標簽（在此之前不顯示導航）。

此外，如果用戶在嘗試加載頁面時具有頁面權限，則值得在服務器端進行檢查。 因為他可以查看代碼並嘗試繞過導航來訪問它。