{
// 获取用户权限
const permissions = await getUserPermissions(userInfo.user_id);
const payload = {
...userInfo,
permissions, // ✅ 添加权限列表
iat: Math.floor(Date.now() / 1000),
exp: Math.floor(Date.now() / 1000) + (6 * 60 * 60)
};
return jwt.sign(payload, JWT_SECRET);
}
```
#### 方案B：在后端创建权限查询API
```typescript
// app/routes/api.users.permissions.ts
export async function loader({ request }: LoaderFunctionArgs) {
const { getUserSession } = await import("~/api/login/auth.server");
const { userInfo, frontendJWT } = await getUserSession(request);
// 从数据库查询用户权限
const permissions = await getUserPermissionsFromDB(userInfo.user_id);
return Response.json({
code: 0,
msg: "成功",
data: { permissions }
});
}
```
#### 推荐的SQL查询
```sql
-- 获取用户的所有权限（通过用户角色）
SELECT DISTINCT
p.permission_key
FROM sso_users u
JOIN user_roles ur ON u.id = ur.user_id
JOIN role_permissions rp ON ur.role_id = rp.role_id
AND rp.grant_type = 'GRANT'
JOIN permissions p ON rp.permission_id = p.id
WHERE u.id = $1
AND u.deleted_at IS NULL
AND ur.deleted_at IS NULL
ORDER BY p.permission_key;
```
### 第二步：前端接收和存储权限
#### 修改 `app/root.tsx` 的 loader
```typescript
export async function loader({ request }: LoaderFunctionArgs) {
try {
const session = await getUserSession(request);
const { frontendJWT, userInfo } = session;
// 解析JWT获取权限（如果JWT中包含了permissions）
let permissions: string[] = [];
if (frontendJWT) {
try {
const decoded = JWTUtils.verifyJWT(frontendJWT);
permissions = decoded.permissions || [];
} catch (error) {
console.error("JWT解析失败:", error);
}
}
return Response.json({
userRole: session.userRole,
userInfo: session.userInfo,
permissions, // ✅ 传递权限列表给前端
frontendJWT,
ENV: {
API_BASE_URL: process.env.NEXT_PUBLIC_API_BASE_URL,
// ... 其他环境变量
}
});
} catch (error) {
// ... 错误处理
}
}
```
### 第三步：前端使用权限Hook
已经创建了 `app/hooks/usePermission.ts`，提供以下功能：
- `hasPermission(key)` - 检查单个权限
- `canCreate(module)` - 检查创建权限
- `canUpdate(module)` - 检查更新权限
- `canDelete(module)` - 检查删除权限
- `canView(module)` - 检查查看权限
- `PermissionGuard` - 权限包装组件
---
## 前端使用示例
### 示例1：控制按钮显示（推荐方式）
```typescript
import { PermissionGuard } from "~/hooks/usePermission";
export default function PromptsIndex() {
return (
{/* ✅ 使用PermissionGuard包装需要权限控制的组件 */}
{canCreateTemplate && (
)}
{canEditTemplate ? (
) : (
)}
{canDeleteTemplate && (
)}
);
}
```
### 示例3：表格操作列权限控制
```typescript
const columns = [
// ... 其他列
{
title: "操作",
key: "operation",
render: (_: unknown, record: PromptTemplateUI) => (
{record.status === 'system' ? (
// 系统预设模板
<>
{canCreateTemplate && (
)}
) : (
// 自定义模板
<>
{canEditTemplate ? (
) : canViewTemplate ? (
) : null}
{canDeleteTemplate && (
)}
)}
)
}
];
```
### 示例4：多权限检查
```typescript
import { usePermission } from "~/hooks/usePermission";
export default function MyComponent() {
const { hasAllPermissions, hasAnyPermission } = usePermission();
// 需要同时拥有多个权限
const canManageTemplates = hasAllPermissions([
'prompt_template:create:write',
'prompt_template:update:write',
'prompt_template:delete:delete'
]);
// 只需拥有其中一个权限
const canAccessTemplates = hasAnyPermission([
'prompt_template:list:read',
'prompt_template:detail:read'
]);
return (
{canManageTemplates &&
}
{canAccessTemplates &&
}