基于角色的动态布局

Question

我正在建立一个用户可以登录的网站。我正在使用 materialise-css 和 Angularjs 作为前端和 java-hibernate 后端（在我的情况下使用 spring 不是一个选项）

用户可以是管理员、经理或员工。我想为不同的登录角色提供不同的视图，如下所示。

对于管理员

对于经理

和员工

我的问题是：

重定向到 3 个不同的 index.html 或页面可以根据角色动态加载是否是一种好方法。如果可以动态加载，怎么做？我已阅读有关使用 ng-show 和 ng-if 的信息。但我不明白如何设计正确对齐的页面以及所有这些。请帮助我正确答案，以将我重定向到任何有用的资源。任何帮助，将不胜感激。谢谢。

Answer 1

是的，动态是可能的，并且是实现您从应用程序中获得的目标的更好主意。

在 Angular 中查看一个名为 nested states or views 的概念，您将使用的模块是 ui-router。看看ui-routersample app。 （...因为它非常深入，涵盖了您可能遇到的大部分场景）

它将允许您构建您的应用程序，例如： （例如，应用程序可以是一个抽象视图，只有一般主题、特定于上下文的菜单、全局共享功能）

• app (index.html, app.js)
  • /admin (admin.view.html, admin.controller.js)
  • /manager (manager.view.html, manager.controller.js)
  • /employee (employee.view.html, employee.controller.js)
    • /task_type/id (employeeTask.view.html, employeeTask.controller.js)

您可以根据需要在逻辑上为每个目的划分应用程序。我在下面的示例中使用了一个名为 angular-permission 的 Angular 模块，但是有多种方法可以解决这个问题，即使只使用暴露于 ui-router 的原生钩子，但它可能需要更多的前期工作。

$stateProvider
    .state('app', {
        abstract: true, // an abstract state is one you can navigate to directly. its a container for child views such as a "master" page
        url: '/foo',
        template: '<ui-view/>'
    })
    .state('app.admin', {
        // url will become '/foo/admin'
        url: '/admin',
        data: {
          permissions: {
            only: ['isAdmin']
          }
        }
    })
    .state('app.manager', {
        // url will become '/foo/manager'
        url: '/manager',
        data: {
          permissions: {
            only: ['isAdmin', 'isManager']
          }
        }
    })
    .state('app.employee', {
        // url will become '/foo/employee'
        url: '/employee',
        data: {
          permissions: {
            only: ['isAdmin', 'isManager', 'isEmployee']
          }
        }
    })
    .state('app.employee.task', {
        // url will become '/foo/employee/sometask/1'
        url: '/:task/:id',
        data: {
          permissions: {
            only: ['isAdmin', 'isManager', 'isEmployee']
          }
        },
        controller: function($scope, $stateParams){
          $scope.taskType = $scope.contacts[$stateParams.task];
          $scope.taskId = $scope.contacts[$stateParams.id];
        }
    })

在上面，您可以看到某些路线仅限于某些用户类型，您还将拥有更加模块化的代码库，并允许某些部分部分只专注于他们自己的职责。例如app.employee.task 将用于显示仅与员工任务相关的数据。 （而不是让单体 html 显示所有页面）