Permify 是一個(gè)開源的授權(quán)服務(wù)，用于在你的個(gè)人應(yīng)用程序和服務(wù)中創(chuàng)建和維護(hù)細(xì)粒度的授權(quán)。

Permify 將授權(quán)數(shù)據(jù)作為關(guān)系元組轉(zhuǎn)換為你指向的數(shù)據(jù)庫(kù)。我們將該數(shù)據(jù)庫(kù)稱為寫入數(shù)據(jù)庫(kù) (WriteDB)，它充當(dāng)授權(quán)系統(tǒng)的集中式數(shù)據(jù)源。你可以使用 Permify 的 DSL - Permify Schema 對(duì)你的授權(quán)進(jìn)行建模，并使用堆棧中任意位置的單個(gè) API 調(diào)用執(zhí)行訪問(wèn)檢查。根據(jù)存儲(chǔ)的關(guān)系元組做出的訪問(wèn)決策。

Permify 最佳使用場(chǎng)景：

• 如果你已經(jīng)有一個(gè)身份/授權(quán)解決方案，并想在此基礎(chǔ)上插入細(xì)粒度的授權(quán)。
• 如果你想為單個(gè)應(yīng)用程序創(chuàng)建一個(gè)統(tǒng)一的訪問(wèn)控制機(jī)制。
• 如果你正在為不斷增長(zhǎng)的微服務(wù)基礎(chǔ)設(shè)施管理授權(quán)。
• 如果你的授權(quán)邏輯讓你的代碼庫(kù)變得混亂。
• 如果你的數(shù)據(jù)模型變得太復(fù)雜，無(wú)法在服務(wù)中處理你的授權(quán)。
• 如果你的授權(quán)越來(lái)越復(fù)雜，無(wú)法在代碼或 API 網(wǎng)關(guān)內(nèi)處理。

特性

• ?? 以高可用性在內(nèi)部轉(zhuǎn)換和存儲(chǔ)授權(quán)數(shù)據(jù)。
• ?? 使用Permify 的DSL Permify Schema 輕松建模和重構(gòu)你的授權(quán)。
• ?? 使用用戶界面輕松審核和推理你的訪問(wèn)控制。
• ? 低延遲，并行圖形引擎進(jìn)行訪問(wèn)檢查。
• ?? 使用跟蹤工具 jaeger、signoz 或 zipkin 分析授權(quán)的性能和行為。

示例

接下來(lái)我們將介紹一種在 React 應(yīng)用程序中使用 React Role 實(shí)現(xiàn) RBAC 的方法，React Role 是 Permify 的一個(gè)開源 RBAC 解決方案。

React Role 包含組件、Hooks 和輔助方法，通過(guò)在沒(méi)有任何后端連接的情況下控制用戶的角色和權(quán)限，在訪問(wèn)管理方面提供了許多優(yōu)勢(shì)。

這里我們來(lái)嘗試開發(fā)一個(gè)類似于 CRM 的應(yīng)用程序，以介紹 React Role 的基礎(chǔ)，將為用戶、用戶角色和用戶權(quán)限定義并設(shè)置模擬。

第一步：創(chuàng)建 React 項(xiàng)目

在終端或命令提示符下面，執(zhí)行以下命令來(lái)創(chuàng)建一個(gè)新的 React 項(xiàng)目。

創(chuàng)建應(yīng)用程序后，可以清空文件自己重新開始項(xiàng)目。完成后，你的文件夾結(jié)構(gòu)、App.js 和 index.js 文件如下所示；

其中 App.js 文件內(nèi)容如下所示：

function App() {
    return <div>React Role Demo</div>;
}
export default App;

index.js 文件內(nèi)容如下所示：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

第二步：UI 界面

這里我們使用了 Ant Design 這個(gè)庫(kù)，對(duì)于剛接觸 React 的人來(lái)說(shuō)，可以在 Ant Design 中使用許多組件。要在你的項(xiàng)目中使用 Ant Design，首先在你的項(xiàng)目文件夾中執(zhí)行以下命令來(lái)安裝 Ant Design。

我們的應(yīng)用程序?qū)⒂袃蓚€(gè)不同的頁(yè)面，其中一個(gè)是登錄頁(yè)面，另一個(gè)是主頁(yè)。用戶將能夠通過(guò)在登錄頁(yè)面上輸入他們的電子郵件來(lái)登錄我們的應(yīng)用程序，所以我們將通過(guò)提供給我們的電子郵件信息獲取用戶具有的角色和權(quán)限。

在主頁(yè)中我們將有一個(gè)包含聯(lián)系信息的表格和 2 個(gè)操作的按鈕，如下圖所示，紅色按鈕用于注銷，紫色按鈕用于創(chuàng)建聯(lián)系人。但我們將限制此聯(lián)系人創(chuàng)建按鈕僅供某些人使用。

第三步：創(chuàng)建用戶

在我們的應(yīng)用中，將有 3 個(gè)不同的用戶角色，如管理員、編輯和代理。我們想根據(jù)這些規(guī)則來(lái)限制創(chuàng)建聯(lián)系人按鈕的訪問(wèn)。我們將使創(chuàng)建聯(lián)系人按鈕只對(duì)擁有管理員或編輯角色的用戶可見和可用。

并且此按鈕將被重新限制為代理角色。但除了角色之外，我們還想通過(guò)用戶的權(quán)限檢查這些按鈕的訪問(wèn)權(quán)限。如果用戶具有 contact-create 權(quán)限，我們將允許他們?cè)L問(wèn)此按鈕，無(wú)論其角色如何。

這里我們創(chuàng)建一些如下所示的示例用戶：

[
   {
       "id": "1fbb807d972847cbb65096a22403bd2f",
       "email": "louise@permify.co",
       "name": "Louise Walker",
       "role": "admin",
       "permission": ["project-index", "project-create", "project-delete"]
   },
   {
       "id": "b108ceae1cfb46dfb34e3aa7c9f28606",
       "email": "miguel@permify.co",
       "name": "Miguel Jensen",
       "role": "editor",
       "permission": ["content-index", "content-create", "content-delete"]
   },
   {
       "id": "c2349776bd364fac9debf397e3f4538a",
       "email": "greg@permify.co",
       "name": "Greg Howell",
       "role": "agent",
       "permission": ["contact-index"]
   },
   {
       "id": "73b612c40a2044718123d476e45a2245",
       "email": "leonard@permify.co",
       "name": "Leonard Wade",
       "role": "agent",
       "permission": ["contact-index","contact-create", "contact-delete"]
   },
   {
       "id": "9455a30af8e141ba905a27e7855babde",
       "email": "alex@permify.co",
       "name": "Alex Collins",
       "role": "agent",
       "permission": ["contact-index"]
   }
]

第四步：添加 React Role

創(chuàng)建示例用戶后，我們需要安裝 React Role 庫(kù)來(lái)根據(jù)用戶的角色和權(quán)限設(shè)置訪問(wèn)管理。要安裝 React Role，請(qǐng)?jiān)陧?xiàng)目文件夾中執(zhí)行以下命令。

安裝 React Role 后，我們需要將我們想要使用 PermifyProvider 組件控制訪問(wèn)檢查的所有結(jié)構(gòu)包裝在 App.js 文件中。

同時(shí)，在 App.js 文件中，我們會(huì)在 Login 頁(yè)面檢查我們保存到 localStorage 的用戶信息，以便查看是哪個(gè)用戶登錄到系統(tǒng)，并將其作為 props 發(fā)送到 Home 頁(yè)面。

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

對(duì)于主頁(yè)，如果用戶有管理員角色、編輯角色或有聯(lián)系人創(chuàng)建權(quán)限，創(chuàng)建聯(lián)系人按鈕必須是可見的。為了控制用戶的角色和權(quán)限，我們需要使用 React Role 庫(kù)中的 HasAccess 組件。

HasAccess 組件采用 3 個(gè)不同的 props 來(lái)檢查用戶是否可以訪問(wèn)某個(gè)元素。

• Roles：按角色設(shè)置一個(gè)組件的可用性。
• Permissions：通過(guò)權(quán)限設(shè)置一個(gè)組件的可用性。
• renderAuthFailed：如果該按鈕無(wú)法訪問(wèn)，應(yīng)該用什么來(lái)代替它。

...
import { HasAccess } from "@permify/react-role";
...
function Home(props) {
 ...
 return (
  ...
         <HasAccess
           roles={["admin", "editor"]}
           permissions="contact-create"
           renderAuthFailed={null}
         >
           <div className="button create-btn">Create Contact</div>
         </HasAccess>
  ...       
 );
}
export default Home;

為了使源代碼更具可讀性和易于理解，部分代碼沒(méi)有包含在內(nèi)。其中有用于在表格和表格自己的設(shè)置中顯示的虛假數(shù)據(jù)請(qǐng)求。如果你想查看整個(gè)源代碼，可以訪問(wèn) GitHub 存儲(chǔ)庫(kù) https://github.com/erenolgun/react-role-demo 。

第五步：測(cè)試

現(xiàn)在我們可以測(cè)試我們的應(yīng)用程序了。首先，讓我們以 Louise Walker 的身份登錄，他的電子郵件地址是 louise@permify.co，他有管理員角色。因此，Louise 將能夠看到創(chuàng)建聯(lián)系人按鈕。

接著讓我們以具有代理角色的 Greg Howell 身份登錄。由于他的角色，Create Contact 按鈕將不可見，因?yàn)?nbsp;renderAuthFilled props 設(shè)置為 {null}。

最后，讓我們以 Leonard Wade 的身份登錄，擔(dān)任代理的角色。但是，他也有創(chuàng)建聯(lián)系人的權(quán)限 contact-create。通常，由于代理角色，Leonard 不應(yīng)該看到“創(chuàng)建聯(lián)系人”按鈕。但是由于 contact-create 權(quán)限，他將能夠訪問(wèn)聯(lián)系人創(chuàng)建按鈕，因?yàn)闄?quán)限屬性設(shè)置為 contact-create。

到這里我們就驗(yàn)證了我們的用戶身份權(quán)限。關(guān)于 Permify 的更多使用可以查看官方文檔 https://docs.permify.co/ 以了解更多信息。

Git 倉(cāng)庫(kù)：https://github.com/Permify/permify。