Question

我正在使用Angular JS开发SPA（单页应用程序）并使用“UI路由器”进行路由并使用Spring MVC框架进行后端处理。

我想在应用程序中引入基于用户角色的视图，因为我们在应用程序中有不同的用户角色。

最好的方法是什么？

有没有办法从服务器检索用户角色，在状态发生变化之前在ui路由中检查它？

Answer 1

您可以通过data属性传递角色，并检查$ stateChangeStart事件的用户访问权限。这当然要求您实现具有用户角色的用户。

将角色限制作为自定义数据传递给状态对象（https://github.com/angular-ui/ui-router/wiki#user-content-attach-custom-data-to-state-objects）

$stateProvider
  .state('admin', {
    url: '/admin',
    data: {
      roles: ['ROLE_ADMIN']
    }
  })

然后在.run函数中检查$ stateChangeStart事件，如果当前用户具有所述角色，如果是，则允许路由更改，如果不是将用户发送到某个访问被拒绝页面（或者只是阻止状态更改）。 / p>

.run(function($rootScope, $state) {
   $rootScope.$on('$stateChangeStart', function (event, toState, toStateParams) {
      // Check if current user has group access
      if(!AuthService.userHasRole(toStateParams.roles)) {
         $state.go('accessdenied');
      }
   })
})

为了让这项工作得以实现，将会有相当多的工作。设置用户/角色/身份验证等将留给您。 JHipster（https://jhipster.github.io/）有一个非常可靠的身份验证，访问，用户角色实现用户。虽然后端是Java。但Angular的实施是坚如磐石的。

Answer 2

我正在探索的一种方法是简单地将页面上的各种视图包含在ng-if中并检查userRole.role（一个全局值）以确定要查看的状态。

然而，必须（或者应该）在UI-Router中相对容易地做到这一点我认为......

然后，我再次在sharepoint网站上构建这个，所以我不必担心顶级访问权限，因为我们在Sharepoint上设置了这些权限。任何可以实际查看页面的人都将是5种userRoles中的一种，我只需要获得该角色，然后根据该角色显示正确的视图

如何在Angular JS中使用UI路由器实现基于角色的视图？

2 个答案: