基于角色的动态布局

Question

我正在构建一个用户可以登录的网站.我正在使用materialize-css和Angularjs作为前端和java-hibernate后端(在我的情况下使用spring不是一个选项)

用户可以是管理员,经理或员工.我想要不同的登录角色的不同视图,如下所示.

对于管理员

经理

和员工

我的问题是:

这是一个很好的方法来重定向到3个不同的index.html或者页面可以根据角色动态加载.如果动态可以完成,如何？我读过关于使用ng-show和ng-if.但我不明白如何设计具有正确对齐的页面以及所有这些.请帮我正确回答,将我重定向到任何有用的资源.任何帮助,将不胜感激.谢谢.

Answer 1

动态是可行的,并且可以更好地实现您的目标,即从您的应用程序中获取.

查看一个名为嵌套状态或角度内视图的概念,您用来实现此目的的模块是ui-router.看一下ui-router 示例应用.(......非常深入,涵盖了您可能遇到的大多数情景)

它将允许您构建类似的应用程序:( 应用程序可以是一个抽象视图,只有一般主题,上下文特定菜单,全局共享功能,例如)

• 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的角度模块,但是有多种方法可以解决这个问题,即使只使用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将用于显示仅关注员工任务的数据.(而不是使用monolith html显示所有页面)