Github愛好者 - 超級好用的開源授權服務和策略引擎

Permify 是一個開源的授權服務，用於在你的個人應用程序和服務中創建和維護細粒度的授權。

Permify 將授權數據作為關係元組轉換為你指向的數據庫。我們將該數據庫稱為寫入數據庫 (WriteDB)，它充當授權系統的集中式數據源。你可以使用 Permify 的 DSL - Permify Schema 對你的授權進行建模，並使用堆棧中任意位置的單個 API 調用執行訪問檢查。根據存儲的關係元組做出的訪問決策。

Permify 最佳使用場景：

如果你已經有一個身份/授權解決方案，並想在此基礎上插入細粒度的授權。

如果你想為單個應用程序創建一個統一的訪問控制機制。

如果你正在為不斷增長的微服務基礎設施管理授權。

如果你的授權邏輯讓你的代碼庫變得混亂。

如果你的數據模型變得太複雜，無法在服務中處理你的授權。

如果你的授權越來越複雜，無法在代碼或 API 網關內處理。

特性

🔐 以高可用性在內部轉換和存儲授權數據。

🔮 使用 Permify 的 DSL Permify Schema 輕鬆建模和重構你的授權。

📝使用用戶界面輕鬆審核和推理你的訪問控制。

✅ 低延遲，並行圖形引擎進行訪問檢查。

🩺 使用跟蹤工具 jaeger、signoz 或 zipkin 分析授權的性能和行為。

示例

接下來我們將介紹一種在 React 應用程序中使用 React Role 實現 RBAC 的方法，React Role 是 Permify 的一個開源 RBAC 解決方案。

React Role 包含組件、Hooks 和輔助方法，通過在沒有任何後端連接的情況下控制用戶的角色和權限，在訪問管理方面提供了許多優勢。

這裡我們來嘗試開發一個類似於 CRM 的應用程序，以介紹 React Role 的基礎，將為用戶、用戶角色和用戶權限定義並設置模擬。

第一步：創建 React 項目

在終端或命令提示符下面，執行以下命令來創建一個新的 React 項目。

創建應用程序後，可以清空文件自己重新開始項目。完成後，你的文件夾結構、App.js 和 index.js 文件如下所示；

其中 App.js 文件內容如下所示：

functionApp(){return<div>ReactRoleDemo</div>;}exportdefaultApp;

index.js 文件內容如下所示：

importReactfrom"react";importReactDOMfrom"react-dom/client";importAppfrom"./App";constroot=ReactDOM.createRoot(document.getElementById("root"));root.render(<App/>);第二步：UI 界面

這裡我們使用了 Ant Design 這個庫，對於剛接觸 React 的人來說，可以在 Ant Design 中使用許多組件。要在你的項目中使用 Ant Design，首先在你的項目文件夾中執行以下命令來安裝 Ant Design。

我們的應用程序將有兩個不同的頁面，其中一個是登錄頁面，另一個是主頁。用戶將能夠通過在登錄頁面上輸入他們的電子郵件來登錄我們的應用程序，所以我們將通過提供給我們的電子郵件信息獲取用戶具有的角色和權限。

在主頁中我們將有一個包含聯繫信息的表格和 2 個操作的按鈕，如下圖所示，紅色按鈕用於註銷，紫色按鈕用於創建聯繫人。但我們將限制此聯繫人創建按鈕僅供某些人使用。

第三步：創建用戶

在我們的應用中，將有 3 個不同的用戶角色，如管理員、編輯和代理。我們想根據這些規則來限制創建聯繫人按鈕的訪問。我們將使創建聯繫人按鈕只對擁有管理員或編輯角色的用戶可見和可用。

並且此按鈕將被重新限制為代理角色。但除了角色之外，我們還想通過用戶的權限檢查這些按鈕的訪問權限。如果用戶具有 contact-create 權限，我們將允許他們訪問此按鈕，無論其角色如何。

這裡我們創建一些如下所示的示例用戶：

[{"id":"1fbb807d972847cbb65096a22403bd2f","email":"louise@permify.co","name":"LouiseWalker","role":"admin","permission":["project-index","project-create","project-delete"]},{"id":"b108ceae1cfb46dfb34e3aa7c9f28606","email":"miguel@permify.co","name":"MiguelJensen","role":"editor","permission":["content-index","content-create","content-delete"]},{"id":"c2349776bd364fac9debf397e3f4538a","email":"greg@permify.co","name":"GregHowell","role":"agent","permission":["contact-index"]},{"id":"73b612c40a2044718123d476e45a2245","email":"leonard@permify.co","name":"LeonardWade","role":"agent","permission":["contact-index","contact-create","contact-delete"]},{"id":"9455a30af8e141ba905a27e7855babde","email":"alex@permify.co","name":"AlexCollins","role":"agent","permission":["contact-index"]}]第四步：添加 React Role

創建示例用戶後，我們需要安裝 React Role 庫來根據用戶的角色和權限設置訪問管理。要安裝 React Role，請在項目文件夾中執行以下命令。

安裝 React Role 後，我們需要將我們想要使用 PermifyProvider 組件控制訪問檢查的所有結構包裝在 App.js 文件中。

同時，在 App.js 文件中，我們會在 Login 頁面檢查我們保存到 localStorage 的用戶信息，以便查看是哪個用戶登錄到系統，並將其作為 props 發送到 Home 頁面。

...import{PermifyProvider}from"@permify/react-role";functionApp(){const[user,setUser]=useState(null);useEffect(()=>{setUser(JSON.parse(localStorage.getItem("user")));},[]);return(<PermifyProvider>{user===null?<Login/>:<Homeuser={user}/>}</PermifyProvider>);}exportdefaultApp;

對於主頁，如果用戶有管理員角色、編輯角色或有聯繫人創建權限，創建聯繫人按鈕必須是可見的。為了控制用戶的角色和權限，我們需要使用 React Role 庫中的 HasAccess 組件。

HasAccess 組件採用 3 個不同的 props 來檢查用戶是否可以訪問某個元素。

Roles：按角色設置一個組件的可用性。

Permissions：通過權限設置一個組件的可用性。

renderAuthFailed：如果該按鈕無法訪問，應該用什麼來代替它。

...import{HasAccess}from"@permify/react-role";...functionHome(props){...return(...<HasAccessroles={["admin","editor"]}permissions="contact-create"renderAuthFailed={null}><divclassName="buttoncreate-btn">CreateContact</div></HasAccess>...);}exportdefaultHome;

為了使源代碼更具可讀性和易於理解，部分代碼沒有包含在內。其中有用於在表格和表格自己的設置中顯示的虛假數據請求。如果你想查看整個源代碼，可以訪問 GitHub 存儲庫 https://github.com/erenolgun/react-role-demo 。

第五步：測試

現在我們可以測試我們的應用程序了。首先，讓我們以 Louise Walker 的身份登錄，他的電子郵件地址是 louise@permify.co，他有管理員角色。因此，Louise 將能夠看到創建聯繫人按鈕。

接着讓我們以具有代理角色的 Greg Howell 身份登錄。由於他的角色，Create Contact 按鈕將不可見，因為 renderAuthFilled props 設置為 {null}。

最後，讓我們以 Leonard Wade 的身份登錄，擔任代理的角色。但是，他也有創建聯繫人的權限 contact-create。通常，由於代理角色，Leonard 不應該看到「創建聯繫人」按鈕。但是由於 contact-create 權限，他將能夠訪問聯繫人創建按鈕，因為權限屬性設置為 contact-create。