第二部分：在文件共享应用程序中使用 Kinde 和 Convex 实现主身份验证和基于角色的访问控制 (RBAC)

这是该帖子的第 2 部分：第 1 部分：在文件共享应用程序中使用 Kinde 和 Convex 进行主身份验证和基于角色的访问控制 (RBAC)。

在本指南中，我们将深入探讨如何构建一个由Next.js、Kinde Auth、Convex DB、Shadcn UI和TypeScript提供支持的安全且可扩展的文件共享平台。这是我们与 Kinde 合作的延续，重点介绍高级基于角色的访问控制 (RBAC) 的概念、配置和实现。

介绍

在第一部分中，我们将 Kinde Auth 和 Convex DB 与 Next.js 集成，实现了无密码身份验证和基本的 RBAC。在本教程中，我们将进一步扩展：

高级 RBAC 概念和用例。
在 Kinde 中配置角色和权限。
在可投入生产的应用程序（例如文件共享平台）中实现 RBAC。

本教程假设您熟悉 Kinde 的基本设置。

了解基于角色的访问控制 (RBAC)

什么是 RBAC？

RBAC 是一种基于角色为用户分配权限的安全模型。本文，我们将深入探讨 RBAC 背后的概念，重点介绍角色如何映射到权限以及如何授予用户访问权限。以下是更详细的解释：

角色：代表系统或组织内的工作职能或职责（例如，管理员、用户、经理、支持）。
权限：定义特定角色的用户可以执行哪些操作（例如，上传、查看、删除、编辑、共享）。
用户：分配的角色，决定他们的访问级别以及他们可以在应用程序中执行的操作。

在我们的文件共享应用中，我们要分配的角色如下所示：

管理员：可以管理用户、文件和设置。还可以上传、编辑、共享和删除文件。
基本用户：可以上传、查看和下载文件，但不能编辑、删除或管理文件或用户。

为什么选择 RBAC？

安全性： RBAC 确保只有授权用户才能访问敏感操作和数据。它限制了未经授权操作的风险，尤其是在可能涉及敏感文档的文件共享平台中。
可扩展性：随着应用程序的发展和更多用户的加入，角色允许您有效地管理权限，而无需手动更新每个用户的权限。
效率：通过定义清晰的角色，您可以简化角色分配流程。只需为新用户分配一个具有特定权限的预定义角色，即可降低复杂性。

应用程序预览

我们的文件共享应用程序包括以下功能：

文件上传
用户可以上传文档、图像、视频、音频等。
文件功能
查看详细信息、编辑、共享、下载和删除文件。

文件排序
按创建日期、名称或大小组织文件。
全局搜索
快速查找整个组织的文件。

使用 Kinde 实现 RBAC

步骤 1：设置权限

对于此应用程序，我们为用户创建了五 (5) 种不同的权限。这些权限定义了用户可以执行的操作：

上传文件：允许用户上传文件到平台。
查看文件详细信息：授予用户查看文件详细信息（例如大小、名称和元数据）的权限。
编辑文件：允许用户编辑文件详细信息，例如重命名文件。
共享文件：允许与其他用户共享文件。
删除文件：允许用户从平台删除文件。

这些权限会映射到 Kinde 中的角色。此步骤使管理员能够轻松地将这些权限分配给各个角色，确保只有授权用户才能执行特定操作。

第 2 步：创建角色

接下来，我们定义将分配给用户的角色。对于我们的文件共享平台，我们定义以下角色：

管理员：拥有所有文件操作的完全访问权限。
基本用户：可以上传和查看文件的详细信息，但不能编辑、共享或删除文件。

这些角色在 Kinde 仪表板中配置，管理员可以在其中为每个角色分配权限。这确保用户拥有所需的权限，避免不必要的访问。

确保切换“分配给新成员”，这样注册我们应用程序的每个新用户都会默认分配一个只有两个权限的“基本用户”角色：

能够将新文件上传到组织
能够查看组织内所有文件的详细信息

他们将无法：

编辑或更新文件
共享文件
删除文件

步骤3：为用户分配角色

默认情况下，新用户会被分配基本用户角色。管理员可以根据用户的职责，根据需要分配其他角色，例如编辑或副管理员。

要在 Kinde 中更新用户角色：

转到 Kinde 仪表板中的“用户”选项卡。
选择一个用户并导航到他们的个人资料。
分配新角色。

UI 级 RBAC 实现

现在我们已经在 Kinde 中配置了角色和权限，我们将在文件共享应用的 UI 级别实现 RBAC。这将允许我们根据当前已验证用户的权限有条件地渲染 UI 元素。

步骤 4：将权限集成到 UI

我们将使用useKindeBrowserClient钩子来获取用户角色和权限，然后使用这些权限来控制 UI 中各种功能的可见性和交互性。这将允许我们根据用户的角色显示或隐藏按钮、下拉列表项和其他组件。

用法 1：文件上传器
FileUploader组件显示一个上传按钮。我们将检查用户是否有上传文件的权限。

const FileUploader = ({ ownerId, accountId, className }: Props) => {
  const { getPermission } = useKindeBrowserClient();

  // Check if user has permission to upload files
  const canUploadFile = getPermission("upload:file");

  if (!canUploadFile?.isGranted) {
    return <div>Access denied</div>;
  }

  return (
    <div {...getRootProps()}>
      <Button type="button">Upload</Button>
    </div>
  );
};

解释：

该组件用于getPermission("upload:file")检查用户是否有上传文件的权限。
如果未授予权限，组件将显示“访问被拒绝”消息而不是上传按钮。

用法 2：操作下拉菜单ActionDropdown
组件处理文件操作（例如查看、编辑、分享、删除）。我们将根据用户权限过滤这些操作。

const ActionDropdown: React.FC<FileCardProps> = ({
  fileId,
  storageId,
  fileName,
  url,
  type,
  size,
  createdAt,
  extension,
  users,
  creator,
}) => {
  const { getPermission } = useKindeBrowserClient();

  // Fetch permissions for each action
  const canViewFileDetails = getPermission("view:file");
  const canEditFile = getPermission("edit:file");
  const canShareFile = getPermission("share:file");
  const canDeleteFile = getPermission("delete:file");

  return (
    <DropdownMenu>
      {/* Action items */}
      {actionsDropdownItems
        .filter((actionItem) => {
          if (actionItem.value === "details") {
            return canViewFileDetails?.isGranted;
          }
          if (actionItem.value === "rename") {
            return canEditFile?.isGranted;
          }
          if (actionItem.value === "delete") {
            return canDeleteFile?.isGranted;
          }
          if (actionItem.value === "share") {
            return canShareFile?.isGranted;
          }
          return true;
        })
        .map((actionItem) => (
          <DropdownMenuItem
            key={actionItem.value}
            onClick={() => { /* handle action */ }}
          >
            {actionItem.label}
          </DropdownMenuItem>
        ))}
    </DropdownMenu>
  );
};

解释：

getPermission("view:file")、等getPermission("edit:file")用于检查用户的权限。
下拉菜单中显示的操作是根据用户是否有权执行这些操作进行过滤的。
例如，没有“edit:file”权限的用户将看不到“重命名”选项

实施后，下拉操作 UI 将如下所示，限制基本用户只能查看和下载文件：

如果我们限制基本用户从 Kinde 仪表板上传文件到应用程序：

您还会看到他们现在被拒绝将文件上传到应用程序：

RBAC 的最佳实践

细粒度权限：与其为角色分配过于宽泛的权限，不如设置更细粒度的权限（例如，“可以编辑元数据” vs. “可以编辑文件”）。这有助于避免不必要的访问，并确保系统安全。
自定义角色：与其使用预定义角色，不如根据您的具体应用创建自定义角色。例如，您可以创建“管理员”角色，负责批准共享文件；或者创建“贡献者”角色，负责上传文件，但不能编辑或删除文件。
定期审核：随着应用程序的增长，定期审查角色和权限。进行审核有助于确保用户拥有适当的访问权限，并防止权限蔓延。

结论

通过结合Next.js、Kinde Auth和Convex DB，我们构建了一个安全且可扩展的文件共享平台。先进的 RBAC 功能可确保用户仅执行与其指定角色相关的操作，从而提高安全性和效率。

通过在 UI 层面集成 RBAC，我们构建了一个灵活且用户友好的系统，该系统能够根据用户角色安全地控制应用功能的访问权限。这确保用户只能访问他们被授权访问的内容，而管理员则拥有对平台的完全控制权。

准备好了吗？立即前往Kinde，构建您的下一个应用！

进一步阅读：

了解 RBAC
Kinde文档

访问完整的代码库

想要探索文件共享应用的完整实现吗？请查看 GitHub 上的代码库。您可以随意克隆、实验并根据自己的需求进行调整。欢迎贡献代码并点赞！

sholajegede / swiftshare

通过安全、快速的云解决方案，您可以随时随地轻松存储、共享和访问您的文件。

这是一个使用引导的Next.jscreate-next-app项目。

入门

首先，运行开发服务器：

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

使用浏览器打开http://localhost:3000查看结果。

您可以通过修改来开始编辑页面app/page.tsx。当您编辑文件时，页面会自动更新。

该项目用于next/font自动优化和加载Vercel 的新字体系列Geist 。

了解更多

要了解有关 Next.js 的更多信息，请查看以下资源：

Next.js 文档- 了解 Next.js 的功能和 API。
学习 Next.js - 交互式 Next.js 教程。

您可以查看Next.js GitHub 存储库- 欢迎您的反馈和贡献！

在 Vercel 上部署

部署 Next.js 应用程序的最简单方法是使用Next.js 创建者的Vercel 平台。

查看我们的Next.js 部署文档以了解更多信息……

在 GitHub 上查看

我们很乐意听到您的声音！

有任何想法、问题或建议吗？请在下方评论区留言，或直接在 GitHub 上联系我。您的反馈有助于改进，并确保我们涵盖您成功所需的一切。告诉我们您的想法——让我们携手共进！

鏂囩珷鏉ユ簮锛�https://dev.to/sholajgede/part-2-master-authentication-and-role-based-access-control-rbac-with-kinde-and-convex-in-a-ch