本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 範例 5：使用 Verified Permissions 和 Cedar 進行 UI 篩選
<a name="avp-ui-filtering-examples"></a>

您也可以使用 Verified Permissions 根據授權的動作實作 UI 元素的 RBAC 篩選。這對於具有內容敏感 UI 元素的應用程式非常有用，這些元素可能會在多租用戶 SaaS 應用程式的情況下與特定使用者或租用戶相關聯。

在下列範例中，`Role``viewer`不允許 `Users` 的 執行更新。對於這些使用者，UI 不應轉譯任何更新按鈕。

![使用 Amazon Verified Permissions 和 Cedar 篩選 UI 的範例](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/saas-multitenant-api-access-authorization/images/avp-example-5.png)


在此範例中，單一頁面 Web 應用程式有四個按鈕。哪些按鈕是可見`Role`的，取決於目前登入應用程式的使用者的 。當單頁 Web 應用程式轉譯 UI 時，它會查詢 Verified Permissions，以判斷使用者獲授權執行的動作，然後根據授權決策產生按鈕。

下列政策指定值`Role`為 的 類型`viewer`可以同時檢視使用者和資料。此政策`ALLOW`的授權決策需要 `viewData`或 `viewUsers`動作，也需要資源與 類型`Data`或 相關聯`Users`。`ALLOW` 決策允許 UI 轉譯兩個按鈕： `viewDataButton`和 `viewUsersButton`。

```
permit (
    principal in GuiAPP::Role::"viewer",
    action in [GuiAPP::Action::"viewData", GuiAPP::Action::"viewUsers"],
    resource 
)
when {
   resource in [GuiAPP::Type::"Data", GuiAPP::Type::"Users"]
};
```

下列政策指定值`Role`為 的 類型`viewerDataOnly`只能檢視資料。此政策`ALLOW`的授權決策需要 `viewData`動作，也需要資源與類型 建立關聯`Data`。`ALLOW` 決策允許 UI 轉譯按鈕 `viewDataButton`。

```
permit (
    principal in GuiApp::Role::"viewerDataOnly",
    action in [GuiApp::Action::"viewData"],
    resource in [GuiApp::Type::"Data"] 
);
```

下列政策指定`Role`值為 的 類型`admin`可以編輯和檢視資料和使用者。此政策`ALLOW`的授權決策需要 `updateData`、 `updateUsers``viewData,`或 的動作`viewUsers`，也需要資源與 類型`Data`或 相關聯`Users`。`ALLOW` 決策允許 UI 轉譯所有四個按鈕：`updateDataButton`、`viewDataButton`、 `updateUsersButton`和 `viewUsersButton`。

```
permit (
    principal in GuiApp::Role::"admin",
    action in [
        GuiApp::Action::"updateData",
        GuiApp::Action::"updateUsers",
        GuiApp::Action::"viewData", 
        GuiApp::Action::"viewUsers"
       ],
    resource 
)
when {
   resource in [GuiApp::Type::"Data", GuiApp::Type::"Users"]
};
```