权限系统设计(7)：鉴权库casl做权限控制
Author：zhoulujun Date：
上篇《权限系统设计(6)：鉴权库Casbin做权限控制 》，但是对于前端，casl更为精巧与流行
| 场景 | Casbin | CASL |
|---|---|---|
| 后端权限控制 | ✅ 适合复杂权限模型（如多租户、ABAC） | ✅ 适合 Node.js 后端简单权限逻辑 |
| 前端权限控制 | ❌ 不直接支持前端 | ✅ 专为前端设计（隐藏 UI 元素等） |
| 动态策略调整 | ✅ 支持实时更新策略 | ✅ 可通过条件动态生成权限 |
| 跨语言一致性 | ✅ 多语言统一模型 | ❌ 仅限 JavaScript/TypeScript |
Casbin基于 PERM 模型（Policy, Effect, Request, Matchers）：
策略（Policy）：定义权限规则（如
p, admin, /data, GET）。请求（Request）：访问请求格式（如
sub, obj, act）。匹配器（Matchers）：逻辑判断规则（如
m = r.sub == p.sub && r.obj == p.obj）。效果（Effect）：最终决策逻辑（如
e = some(where (p.eft == allow))）。
CASL基于能力（Ability）的声明式模型：
通过 can() 和 cannot() 定义权限（如 can('read', 'Article')）。
支持条件过滤（如 can('read', 'Article', { authorId: user.id })）。
所以CASL使用起来超级简单（Casbin认知成本太高），无需复杂配置，适合快速集成到前端或 Node.js 应用。
// ability.js
import { defineAbility } from "@casl/ability";
export default defineAbility((can, cannot) => {
can("read", "Post");
can("add", "Post");
cannot("update", "Post");
cannot("delete", "Post");
});permission on React Component
import { createContext } from "react";
import { createContextualCan } from "@casl/react";
import ability from "./ability.js";
export const AbilityContext = createContext();
export const Can = createContextualCan(AbilityContext.Consumer);
function App() {
const post = { title: "example-title", content: "example-content" };
return (
<AbilityContext.Provider value={ability}>
<Can I="add" a="Post">
<button>Add</button>
</Can>
<Can I="read" a="Post">
<Post post={post} />
</Can>
</AbilityContext.Provider>
);
}
function Post({ post }) {
return (
<div>
<h2>{post.title}</h2>
<p>{post.content}</p>
<Can I="update" a="Post">
<button>Edit</button>
</Can>
<Can I="delete" a="Post">
<button>Delete</button>
</Can>
</div>
);
}在路由层面控制，参看：https://gist.github.com/stalniy/5adcccf8117177078ada0454e6a6d300
参考文章：
https://dev.to/dwalsh01/managing-user-roles-in-react-using-casl-11f6
https://dev.to/naufalafif/dynamic-permissions-in-react-using-casl-a-guide-to-secure-your-app-2ino
https://gist.github.com/stalniy/5adcccf8117177078ada0454e6a6d300
转载本站文章《权限系统设计(7)：鉴权库casl做权限控制》,
请注明出处：https://www.zhoulujun.cn/html/Operation/PM/2025_0221_9494.html