AngularJS – 實作基于角色通路控制的 GUI

這些天我們忙于應用的前端工作，我們主要使用angular完成的。最近的一個需求是基于角色通路gui。一個使用者可以有多個角色，而它應隻能通路授權給他的那一部分gui。

我們主要通過在2個層次限制應用的gui通路，來解決上述需求:

1.一個使用者隻能通路授權給他的頁面（或者說流量）

2.在一個頁面上，使用者隻能看到授權給他的那部分。

要解決上述需求1，我們捕捉路有變化事件并對每一路由變化進行檢查，看使用者是否授權通路下一路由，保證他不會看到拒絕通路的頁面

上面的authservice 是我們建立的一個服務，它有角色使用者清單，并給授權使用者路由流量。函數isurlaccessibleforuser() 将檢查配置設定的使用者是否可以通路給定流量并傳回true或false.

服務将 從背景和路由通路資訊中擷取一個使用者的角色清單，每個角色将儲存在服務本身的一個map集合中。（關于使用者和角色的一些細節可以存到資料局，通過背景的方式擷取）

這将解決上述需求的第一點，對于需求的第二點我們來建立一條指令。這個指令資訊類似以下：

如果使用者有 role_admin 的這個角色的時候，将以上的html标簽将被加載到html的頁面中，否則将 這個 html标簽從 頁面中移除。

指令的實作代碼如下:

這一辦法是很簡潔的，而我們在gui上很巧妙的實作了使用者授權. 一個潛在的問題是，如果ui的渲染器在你從背景擷取使用者角色之前就已經在運作了，那麼該html中所有帶上該指令的部分都會從html中被移除掉. 這對于我們而言不是個麻煩，因為我們會在登入完成之時就擷取到了使用者角色的詳細資訊。而如果這一問題對你而言是個問題的話，解決方案可以是這樣：如果使用者角色還沒有擷取到，就隻是隐藏這些html元素，僅等到你擷取到角色清單之後再按照授權0資訊将它們移除掉. 同時還請注意不能因為有了一個gui的通路控制，就省掉了背景固有的安全實作.

達者廣交，分享為先!