超级好用的开源授权服务和策略引擎 – Permify
Permify 是一个开源的授权服务，旨在为你的应用程序和服务提供细粒度的授权管理。
Permify 将授权数据转化为关系元组，存储在指定的数据库中，称为写入数据库 (WriteDB)。这个数据库充当了授权系统的集中式数据源。通过 Permify 的 DSL 语言——Permify Schema，你可以轻松建模授权，并使用单一 API 调用在任意应用堆栈中执行访问控制。访问决策基于存储的关系元组。
Permify 适用场景：
- 当你已经有了身份/授权解决方案，并希望在此基础上进一步细化授权时。
- 当你需要为单个应用程序构建统一的访问控制机制时。
- 当你管理不断扩展的微服务架构的授权时。
- 当复杂的授权逻辑让代码库变得凌乱时。
- 当数据模型过于复杂，无法在服务中处理授权时。
- 当授权变得太复杂，难以在代码或 API 网关中实现时。
特点：
- 🔐 高可用性地转换和存储授权数据。
- 🔮 通过 Permify Schema 轻松建模和重构授权逻辑。
- 📝 提供用户界面，便于审核和推理访问控制。
- ✅ 低延迟并行图形引擎实现快速访问检查。
- 🩺 集成 Jaeger、Signoz 或 Zipkin 等工具，分析授权性能和行为。
示例
下面将介绍如何在 React 应用中使用 React Role 实现基于角色的访问控制 (RBAC)。React Role 是 Permify 的一个开源 RBAC 解决方案，包含组件、Hooks 和辅助方法，能够无需后端连接便控制用户的角色和权限。
我们将开发一个类似 CRM 的应用，展示 React Role 的基本用法，包括为用户、用户角色和权限设置模拟数据。
第一步：创建 React 项目
在终端或命令提示符中执行以下命令创建新的 React 项目。创建完成后，你可以清空文件并重建项目。项目的文件结构、App.js 和 index.js 文件将如下所示：
App.js 内容：
function App() {
return <div>React Role Demo</div>;
}
export default App;
index.js 内容：
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 库，它提供了许多组件，非常适合 React 初学者。首先，在项目文件夹中执行命令安装 Ant Design。我们的应用将有登录页面和主页两部分。用户通过登录页面输入邮箱后登录系统，系统将根据邮箱信息返回该用户的角色和权限。在主页中，我们将展示一个包含联系信息的表格，以及两个操作按钮：红色按钮用于注销，紫色按钮用于创建联系人。我们将限制此联系人创建按钮，只允许特定用户使用。
第三步：创建用户
我们的应用中将有三种不同的用户角色：管理员、编辑和代理。我们将根据角色限制创建联系人按钮的访问。只有拥有管理员或编辑角色的用户，才可以看到并使用该按钮。
此外，除了角色之外，我们还需要通过用户的权限进一步限制按钮的访问。若用户拥有 contact-create 权限，不论角色为何，他们都可以访问此按钮。以下是一些示例用户：
[
{
"id": "1fbb807d972847cbb65096a22403bd2f",
"email": "[email protected]",
"name": "Louise Walker",
"role": "admin",
"permission": ["project-index", "project-create", "project-delete"]
},
{
"id": "b108ceae1cfb46dfb34e3aa7c9f28606",
"email": "[email protected]",
"name": "Miguel Jensen",
"role": "editor",
"permission": ["content-index", "content-create", "content-delete"]
},
{
"id": "c2349776bd364fac9debf397e3f4538a",
"email": "[email protected]",
"name": "Greg Howell",
"role": "agent",
"permission": ["contact-index"]
}
]
第四步：添加 React Role
创建完用户后，安装 React Role 库以根据用户的角色和权限设置访问管理。在 App.js 中，使用 PermifyProvider 组件来控制访问检查。
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;
第五步：测试
现在，你可以测试应用了。以 Louise Walker 登录，她是管理员，将能够看到创建联系人按钮。再以 Greg Howell 登录，他是代理，按钮不可见。最后，以 Leonard Wade 登录，他也是代理但拥有 contact-create 权限，能够看到并使用创建联系人按钮。
证了我们的用户身份权限。关于 Permify 的更多使用可以查看官方文档 https://docs.permify.co/
以了解更多信息。
Git 仓库：https://github.com/Permify/permify