javascript - 带有动态 Controller 的 Angular + ui-angular 动态选项卡

Question

我需要构建基于权限的管理仪表板。 html 的标题由一些主要的 havs 组成，最后一个导航用于 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>

如何加载 $http 上的第一个选项卡以 SettingsController 结束，并将其连接到相应的 Controller ？以及如何在不同状态下切换事件标签？

Answer 1

不知道是否可以动态定义路由，但您可以通过以下方式实现您的目标。

1. 定义应用的所有可能路径。
2. 让没有特定权限的用户无法访问它们(我使用 this approach ).
3. 加载用户权限。
4. 根据这些权限构建选项卡(在此之前不要显示导航 点)。

此外，值得在服务器端检查用户在尝试加载页面时是否具有页面访问权限。因为他可以查看代码并尝试绕过导航访问代码。