Mengimplementasikan Role-Based Access Control (RBAC) dengan Claude Code

What Is Role-Based Access Control

RBAC (Role-Based Access Control) is an access control model that assigns roles to users and defines operation permissions per role. With Claude Code, you can systematically implement even complex permission structures.

Permission Model Design

// Permission definitions
const PERMISSIONS = {
  "posts:read": "View posts",
  "posts:create": "Create posts",
  "posts:update": "Edit posts",
  "posts:delete": "Delete posts",
  "users:read": "View user info",
  "users:manage": "Manage users",
  "settings:manage": "Manage settings",
} as const;

type Permission = keyof typeof PERMISSIONS;

// Role-permission mapping
const ROLE_PERMISSIONS: Record<string, Permission[]> = {
  viewer: ["posts:read"],
  editor: ["posts:read", "posts:create", "posts:update"],
  admin: [
    "posts:read", "posts:create", "posts:update", "posts:delete",
    "users:read", "users:manage",
  ],
  superadmin: Object.keys(PERMISSIONS) as Permission[],
};

Database Schema (Prisma)

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String
  roles     UserRole[]
  createdAt DateTime @default(now())
}

model Role {
  id          String       @id @default(cuid())
  name        String       @unique
  permissions Permission[]
  users       UserRole[]
}

model Permission {
  id     String @id @default(cuid())
  name   String @unique
  roles  Role[]
}

model UserRole {
  user   User   @relation(fields: [userId], references: [id])
  userId String
  role   Role   @relation(fields: [roleId], references: [id])
  roleId String

  @@id([userId, roleId])
}

Authorization Middleware

import { Request, Response, NextFunction } from "express";

function requirePermission(...requiredPermissions: Permission[]) {
  return async (req: Request, res: Response, next: NextFunction) => {
    const user = req.user;
    if (!user) {
      return res.status(401).json({ error: "Authentication required" });
    }

    const userPermissions = await getUserPermissions(user.id);
    const hasPermission = requiredPermissions.every((perm) =>
      userPermissions.includes(perm)
    );

    if (!hasPermission) {
      return res.status(403).json({
        error: "Insufficient permissions",
        required: requiredPermissions,
      });
    }

    next();
  };
}

async function getUserPermissions(userId: string): Promise<Permission[]> {
  const user = await prisma.user.findUnique({
    where: { id: userId },
    include: {
      roles: { include: { role: { include: { permissions: true } } } },
    },
  });

  if (!user) return [];
  const permissions = new Set<Permission>();
  for (const userRole of user.roles) {
    for (const perm of userRole.role.permissions) {
      permissions.add(perm.name as Permission);
    }
  }
  return Array.from(permissions);
}

Applying to API Routes

const router = express.Router();

// Viewing allowed for all roles
router.get("/posts", requirePermission("posts:read"), listPosts);

// Creating requires editor or above
router.post("/posts", requirePermission("posts:create"), createPost);

// Deleting requires admin or above
router.delete("/posts/:id", requirePermission("posts:delete"), deletePost);

// User management requires admin or above
router.get("/users", requirePermission("users:read"), listUsers);
router.put("/users/:id/roles", requirePermission("users:manage"), updateUserRoles);

Frontend Permission Checking

import { createContext, useContext, ReactNode } from "react";

interface AuthContextType {
  user: User | null;
  permissions: Permission[];
  hasPermission: (perm: Permission) => boolean;
  hasAnyPermission: (...perms: Permission[]) => boolean;
}

const AuthContext = createContext<AuthContextType | null>(null);

function PermissionGate({
  permission, children, fallback = null,
}: {
  permission: Permission; children: ReactNode; fallback?: ReactNode;
}) {
  const { hasPermission } = useContext(AuthContext)!;
  if (!hasPermission(permission)) return <>{fallback}</>;
  return <>{children}</>;
}

// Usage
function PostActions({ postId }: { postId: string }) {
  return (
    <div>
      <PermissionGate permission="posts:update">
        <EditButton postId={postId} />
      </PermissionGate>
      <PermissionGate permission="posts:delete">
        <DeleteButton postId={postId} />
      </PermissionGate>
    </div>
  );
}

Using with Claude Code

When asking Claude Code to implement RBAC, be explicit about integration with your existing auth system. For authentication basics, see JWT Authentication Patterns. For database design, see the Prisma ORM Complete Guide.

Implement RBAC.
- Roles: viewer, editor, admin, superadmin
- Define schema with Prisma
- Permission checks via Express middleware
- Create a PermissionGate component for React

For RBAC design principles, see the NIST RBAC Model. For Claude Code details, check the official documentation.

Summary

RBAC is a foundational permission management requirement for many applications. With Claude Code, you can quickly build consistent permission management from backend to frontend.