AngularJS,ui.router,基于用户角色加载模板和控制器

前端之家收集整理的这篇文章主要介绍了AngularJS,ui.router,基于用户角色加载模板和控制器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我开发了一个使用REST API的单页应用程序。用户需要登录才能访问应用程序。当用户登录时,他们被重定向到/ dashboard。在此网址/路线上,我想根据用户的角色(例如普通用户管理员用户)加载不同的模板和控制器。

我在模板部分下看了https://github.com/angular-ui/ui-router/wiki,但没有选项支持我想实现的。

>使用templateUrl和function(stateParams)我不能注入帮助我确定用户角色的服务,以便我可以加载模板,例如。 views / user / dashboard.html或views / admin / dashboard.html
>使用templateProvider我将注入帮助我确定用户角色的服务,但是如何加载模板?

任何解决方案还应根据用户角色加载不同的控制器,例如UserDashboardController或AdminDashboardController。

所以必要的是,我需要一个单一的路由加载不同的模板AND控制器基于用户角色变量,当用户登录时在服务中设置的用户角色变量。

我沿着正确的线路思考,还是应该实现另一个解决方案?

任何帮助,这将是非常感激。

根据用户角色加载模板和控制器

虽然技术上ui路由器templateUrl函数不支持注入服务,您可以使用templateProvider注入持有角色变量或异步加载的服务,然后使用$ templateFactory返回HTML内容。请考虑以下示例:

var app = angular.module('app',['ui.router']);

app.service('session',function($timeout,$q){
    this.role = null;

    this.loadRole = function(){
        //load role using axax request and return promise
    };
});

app.config(function($stateProvider,$urlRouterProvider){
    $stateProvider.state('dashboard',{
        url: '/dashboard',templateProvider: function(session,$stateParams,$templateFactory){
          return session.loadRole().then(function(role){
              if(session.role == 'admin'){
                return $templateFactory.fromUrl('/admin/dashboard.html',$stateParams);
              } else {
                return $templateFactory.fromUrl('/user/dashboard.html',$stateParams);
              }
          });
        }
      });

    $urlRouterProvider.otherwise('/dashboard');
});

至于控制器,你可以说明你想在ng-controller的每个模板的根元素中使用特定的控制器。或者类似地,您可以使用controllerProvider选项注入已经由templateProvider解析的角色的服务。看看在ui-router状态定义里面的controllerProvider选项的下面的例子:

controllerProvider: function(session){
  if(session.role == 'admin'){
    return 'AdminCtrl';
  } else {
    return 'UserCtrl';  
  }
}

当然,您可以轻松地从此代码删除重复,并定义一个更容易访问的微DSL,为特定的角色和视图定义不同的规则更容易。

以下demo应该可以帮助你理解代码

这是正确的做法吗?

通常这大大取决于上下文。为了帮助你想出一个答案,我先建议以下问题:

>提交给角色的视图有多少不同?

你要隐藏只有几个按钮和其他动作元素基本上使一个页面只读的普通用户和可编辑的超级用户?如果更改将很小,我可能会使用相同的视图,只隐藏特定的元素,可能伪造一个类似于ng的指令,如果这将允许启用/禁用特定功能声明性只有role =’operator,admin’。另一方面,如果视图将有很大的不同,那么使用不同的模板可以大大简化标记

>特定页面上可用的操作因角色而异?

在表面上看起来相似的动作对于不同角色的内部工作是否不同?例如,如果您有编辑操作可用于用户管理员角色,但在一种情况下,它启动向导如UI和其他复杂的形式高级用户,然后使用单独的控制器更有意义。另一方面,如果管理操作是用户操作的超集,那么拥有单个控制器似乎更容易遵循。注意,在这两种情况下,控制器的事情都得到补偿 – 它们只应该将视图粘贴到封装在服务/视图模型/模型中的行为/选择名称

>你会有许多上下文分开的链接,导致特定的页面从应用程序的不同地方吗?

例如,如果能够通过简单地写入ui-sref =“dashboard”而提供对特定页面的导航,而不管当前用户角色如果它存在于各种上下文中则可能是有益的。如果是这种情况,那么在单个路由/状态下定义它们似乎更可维护,然后一个条件逻辑用于基于角色构建不同的ui-sref / ng-href。但是,您也可以根据用户角色动态地定义路由/状态 – 动态加载或不加载

>对特定页面上不同角色可用的视图和操作是单独进行还是一起进行?

有时候,我们首先为普通用户构建功能,然后为高级,然后为最终。将工作分配给用户管理员在团队成员之间的工作是不寻常的,特别是如果可以轻松绘制清晰的边界。在这种情况下具有单独的视图和控制器可以简单地开发人员工作避免冲突当然,这不是所有的彩虹和独角兽 – 团队必须非常纪律,以消除重复,很可能会发生。

希望我的建议将帮助你决定。

猜你在找的Angularjs相关文章