基于角色

Question

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

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

对于管理员

经理

和员工

我的问题是：

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

Answer 1

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

在angular中查看名为nested states or views的概念，您用来实现此目的的模块是ui-router。请查看ui-router sample app。 （......非常深入，涵盖了您可能遇到的大多数情景）

它允许你构建你的应用程序，如： （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的角度模块，但是有多种方法可以解决这个问题，即使只使用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显示所有页面）