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

# 範例 4：使用 OPA 和 Rego 進行 UI 篩選
<a name="opa-ui-filtering-examples"></a>

OPA 和 Rego 的彈性支援篩選 UI 元素的能力。下列範例示範 OPA 部分規則如何針對 RBAC 的 UI 中應顯示的元素進行授權決策。此方法是使用 OPA 篩選 UI 元素的許多不同方法之一。

![使用 OPA 和 Rego 進行 UI 篩選](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/saas-multitenant-api-access-authorization/images/opa-example-4.png)


在此範例中，單一頁面 Web 應用程式有四個按鈕。假設您想要篩選 Bob、Shirley 和 Alice 的 UI，以便他們只能看到與其角色對應的按鈕。當 UI 收到來自使用者的請求時，它會查詢 OPA 部分規則，以判斷哪些按鈕應該顯示在 UI 中。當 Bob （使用角色 `viewer`) 向 UI 發出請求時，查詢會將以下內容做為輸入傳遞給 OPA：

```
{
    "role": "viewer"
}
```

OPA 使用 RBAC 結構化的外部資料來做出存取決策：

```
{
    "roles": {
        "viewer": ["viewUsers", "viewData"],
        "dataViewOnly": ["viewData"],
        "admin": ["viewUsers", "viewData", "updateUsers", "updateData"]
    }
}
```

OPA 部分規則同時使用外部資料和輸入來產生允許的動作清單：

```
user_permissions[permissions] {
    permissions := data.roles[input.role][_]
}
```

在部分規則中，OPA 會使用`input.role`指定的 做為查詢的一部分，來判斷應該顯示哪些按鈕。Bob 具有角色 `viewer`，而外部資料指定檢視器有兩個許可： `viewUsers`和 `viewData`。因此，Bob （以及具有檢視器角色的任何其他使用者） 此規則的輸出如下所示：

```
{
    "user_permissions": [
        "viewData",
        "viewUsers"
    ]
}
```

具有 `dataViewOnly`角色的 Shirley 輸出會包含許可按鈕：`viewData`。具有 `admin`角色的 Alice 輸出將包含所有這些許可。查詢 OPA 時，這些回應會傳回 UI`user_permissions`。然後，應用程式可以使用此回應來隱藏或顯示 `viewUsersButton`、`updateUsersButton`、 `viewDataButton`和 `updateDataButton`。