在AngularJS中實施授權

Question

我想在AngularJS中實施授權。在我的項目中，這是一種社交媒體，不同的角色或甚至相同的角色可能會以不同的方式查看視圖文件。

例如，假設我們有兩個不同的角色：客戶和公司。

客戶和公司在共享查看文件中可能有不同的東西，例如，一個公司可以在他的個人資料上有費率，而一個客戶不能。 （不同的角色）。

或者客戶可能會在一個頁面中看到一個按鈕，而另一個客戶則不能。 （相同的角色）

正如你所看到的，我不能通過簡單地檢查角色來實現授權，並且在某些情況下我需要與服務器通信。

我有多種選擇：

• 建立在我的控制器與相應的權限，他們有假默認值範圍變量：

  $scope.auth = { canRate: false, isConnected: false };

  然後連接到服務器，並改變基於響應的auth對象的值。並在我的視圖文件中使用ng-if來顯示或隱藏元素。

• 創建一個指令並將逗號分隔的權限傳遞給它。

  <button auth="canRate,isConnected"></button>

  然後連接到服務器來檢查的權限。如果他們全部都是真的，那麼顯示這個元素。

• 使用resolve: {...}並在路由時從服務器獲取所有必要的數據，這會增加每個頁面的加載時間。

我想知道有沒有更好的方法來解決這個問題？ 任何形式的幫助或評論將不勝感激。

注意：當然，我有服務器端認證和授權！我只想根據用戶角色或我解釋的其他一些條件在視圖文件中顯示一些元素。而這個元素就像一個按鈕或鏈接，否則，而不是使用共享視圖和隱藏元素，我可以爲每種情況使用不同的視圖。

任何如何，我知道這種方法僅用於顯示目的，他們不能解決安全挑戰。

*注意：看看this repository。

Answer 1

首先，我喜歡AngularJS。但是，像所有的Web客戶端框架一樣，嚴格意義上說，你不能在AngularJS中實現授權。現在，在每個人都達到投票按鈕之前，讓我解釋一下：

您不能相信Web客戶端隱藏用戶的數據。如果服務器將數據發送到客戶端，他們仍然可以找到一種方法來查看它（例如，使用fiddler），即使您使用ng-hide來避免顯示它。

因此，您必須在服務器端實施授權。現在，假設您這樣做：

AngularJS非常適合基於您從服務器接收的數據構建動態Web界面。所以，你的服務器應該只發送客戶端允許看到的數據。然後，您可以使用ng-hide或ng-if來避免顯示會顯示該數據的組件。

此外，您的服務器甚至可以發送一個對象，其中包含可供用戶使用的可能操作列表。然後你可以在你的按鈕中使用ng-hide，以便當動作不可用時不顯示它們。

即使如此，您仍然需要編碼您的服務器端以忽略用戶不允許採取的操作。

Answer 2

您的方法可行，但不安全。我會確保服務器也處理認證。就個人而言，我在使用AngularJS時總是使用基於服務器端令牌的認證系統。

而不是使用ng-if，你應該讓你的GET或POST請求需要在登錄時給出的令牌。從那裏服務器可以確定是否允許請求成功，而不會有用戶僞造證書的機會。這兩個示例都可以正常工作，但只能將它們用作隱藏事物的手段，以便僅用於顯示目的。 Web客戶端不會保持敏感信息的安全，也不會阻止不需要的用戶發出POST請求的可能性。