基於角色的角度UI路由器隱藏

我正在使用Angularjs與UI路由器在我的Web應用程序內導航。我使用Web Api作爲後端。我使用了Taiseer Joudeh的教程來實現身份驗證和授權。現在這部分工作很好，但現在我想根據經過身份驗證的用戶的角色隱藏前端的菜單項。我有下面的代碼在我的狀態提供：基於角色的角度UI路由器隱藏

  $stateProvider 
      .state("warehouse", { 
       abstract: true, 
       url: "/warehouse", 
       template: "<ui-view/>", 
       ncyBreadcrumb: { 
        label: "Warehouse" 
       } 
      }) 
      .state("warehouse.manager", { 
       url: "/pt/manager", 
       templateUrl: "/App/Views/Warehouse/Pt/manager.html", 
       controller: "PtManagerController", 
       ncyBreadcrumb: { 
        label: "PT Beheer" 
       }, 
       data: { 
        roles: ["Admin", "User", "Manager"] 
       } 
      });

和用戶數據被存儲在被這樣的控制器檢索本地存儲：

$scope.currentUser = localStorageService.get("authorizationData");

我的菜單，如下所示：

  <li> 
      <a bs-dropdown aria-haspopup="true" aria-expanded="false" class="header-item-toggle">Warehouse <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
       <!-- PTs --> 
       <li class="dropdown-header">PTs</li> 
       <li> 
        <a ui-sref="warehouse.manager">PT Beheer</a> 
       </li> 
      </ul> 
     </li>

用戶的角色可通過$ scope.currentUser.roles訪問; 但我真的不知道如何從這裏繼續。有沒有人可以幫助我或讓我朝正確的方向發展？我已經閱讀了一些博客帖子，但他們與我的解決方案非常不同，我沒有那麼熟悉Angular，所以我很難將其轉化爲我的情況。

非常感謝所有幫助。

來源

2015-12-31 Ronald Rozema

爲了防止用戶點擊鏈接，可以在HTML中使用ng-if語句與當前用戶的角色進行比較。

<li ng-if="currentUser === 'Admin'"> 
    <a ui-sref="warehouse.manager">PT Beheer</a> 
</li>

要概括這一點，我已經使用存儲在服務中的用戶角色的解決方案，並創造了一個指令，它會檢查用戶的角色。然後可以使用該指令。

<li user-role="administrator"> 
    <a ui-sref="warehouse.manager">PT Beheer</a> 
</li>

如果要防止用戶通過URL訪問的頁面，你需要寫一個角度配置功能，檢查的$stateChangeStart事件，檢查用戶角色，並呼籲preventDefault()。

angular.module('myModule').config(function($rootScope, userService) { 
    $rootScope.$on('$stateChangeStart', function(event, toState) { 
    if (userService.role is not in toState.data.roles) { // pseudo code 
     event.preventDefault(); 
    } 
    } 
}

來源

2015-12-31 14:34:56 Chic

謝謝！這有助於很多！ –

基於角色的角度UI路由器隱藏

回答

相關問題