第2部分：使用Kinde和Convex在文件共享应用中掌握认证与基于角色的访问控制（RBAC）

这是帖子的第二部分：第一部分：在文件共享应用中实现身份验证与基于角色的访问控制（RBAC）
点击阅读

在这份指南里，我们将探讨如何使用 Next.js 、 Kinde Auth 、 Convex DB 、 Shadcn UI 和 TypeScript 构建一个安全且可扩展的文件共享平台。该平台由 Next.js、Kinde Auth、Convex DB、Shadcn UI 和 TypeScript 构建。这将继续我们在 Kinde 上的旅程，重点关注高级RBAC的概念、配置及其实现。

在第1部分中，我们使用Kinde Auth和Convex DB与Next.js集成了密码验证和基本的基于角色的访问控制(RBAC)功能。在这次教程里，我们将扩展内容。

1. 高级 RBAC 概念及其应用场景。
2. 在 Kinde 中配置角色和权限设置。
3. 在一个准备上线的应用程序（如文件共享平台）中实现 RBAC。

本教程假设你已经熟悉基本的Kinde设置。

RBAC是什么？

基于角色的访问控制 (RBAC) 是一种安全模型，它根据用户的角色来分配权限。让我们更深入地探讨RBAC的概念，重点讨论角色如何映射到权限，以及用户是如何获得访问权限的。下面是对这些概念的更详细说明：

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

在我们的文件共享应用中，将被分配的角色如下：

• 管理员：可以管理用户、文件和系统设置。还可以上传、编辑、分享及删除文件。
• 普通用户：可以上传、浏览和下载文件，但不能编辑、删除或管理文件或其他用户。

为什么用RBAC？

（注：RBAC即“基于角色的访问控制”）

1. 安全: RBAC 确保只有授权用户可以访问敏感数据和操作。它减少了未经授权操作的风险，尤其是在可能涉及敏感文件的文件共享环境中。

2. 扩展性： 随着您的应用程序增长和用户增多，角色允许您高效管理权限，无需手动为每位用户更新权限。

3. 高效性: 通过定义清晰的角色，这可以简化角色分配的过程。新用户只需分配一个预定义的角色，这个角色已有一套特定的权限，从而减少复杂性。

我们的文件分享应用包含以下功能：

• 文件上传
  用户可以上传文档、图片、视频、音频等各种类型的内容。
  

• 文件功能
  查看、编辑、共享、下载和删除文件。
  

点击查看文件分享图片。这是一个关于文件分享的图片。

• 文件排序
  按创建时间、名称，或大小对文件进行排序。
  

• 全局搜索:
  快速查找组织中的文件。

步骤 1: 设置权限

在这个应用里，我们为用户创建了五种不同的权限。权限定义了用户可以做什么。

• 将文件上传到平台: 允许用户将文件上传到平台。
• 查看文件信息: 让用户可以查看文件信息，如文件大小、名称和元数据。
• 编辑文件信息: 让用户可以编辑文件信息，例如重命名文件。
• 与他人分享文件: 允许用户与他人分享文件。
• 从平台删除文件: 让用户可以删除平台上的文件。

这些权限关联到了Kinde的角色中。这样，管理员可以轻松地将这些权限分配给不同的角色，确保只有经过授权的用户才能执行特定任务。

第二步：建角色

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

• 管理员账号: 拥有对所有文件操作的完全访问权限。
• 普通用户账号: 可以上载和查看文件的详细信息，但不能编辑、分享或删除文件内容。

这些角色是在Kinde仪表板中配置的，管理员可以在那里设置每个角色的权限。这确保了用户只拥有他们需要的权限，避免不必要的访问权限。

确保切换 "分配给新成员" 选项，这样每个新注册的用户都会默认被分配 "基本用户" 角色，并且只能访问两项权限。

• 上传新文件到团队的能力
• 浏览团队内所有文件信息的能力

他们将无法做到的是:

• 编辑或更新文件
• 分享文件
• 删除文件

第三步：给用户分配角色：

默认，新用户将被默认设为基本用户。管理员可以根据需要将角色设置为编辑或子管理员等，根据其职责。

在 Kinde 中更新用户角色：

• 转到 Kinde 仪表板的“用户”标签。
• 选择一个用户并进入他们的个人资料页面。
• 给他们分配一个新的角色。

现在我们已经设置了 Kinde 中的角色和权限，我们将在文件共享应用的 UI 层实现 RBAC。这样我们就可以根据条件渲染 UI 元素，基于当前用户的权限。

第 4 步：在 UI 中整合权限

我们将使用 useKindeBrowserClient 钩子来获取到用户角色和权限，然后利用这些权限控制 UI 中各种功能的可见性和可操作性。这将使我们能够根据用户角色，显示或隐藏按钮、下拉菜单选项和其他组件。

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

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

      // 检查你是否有上传文件的权限
      const canUploadFile = getPermission("获取权限");

      如果 (!canUploadFile?.被授权) {
        return <div>拒绝访问</div>;
      }

      return (
        <div {...getRootProps()}>
          <Button type="button">点击上传</Button>
        </div>
      );
    };

进入全屏，退出全屏

说明：

• 此组件使用 getPermission("upload:file") 检查用户是否有上传文件的权限。
• 如果权限未被批准，组件会显示 “访问被拒” 提示，而不是上传按钮。

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

    const 操作菜单选项: React.FC<FileCardProps> = ({
      fileId,
      storageId,
      fileName,
      url,
      type,
      size,
      createdAt,
      extension,
      users,
      creator,
    }) => {
      const { getPermission } = useKindeBrowserClient();

      // 获取每个操作的权限值
      const canViewFileDetails = getPermission("view:file");
      const canEditFile = getPermission("edit:file");
      const canShareFile = getPermission("share:file");
      const canDeleteFile = getPermission("delete:file");

      return (
        <DropdownMenu>
          {/* 操作选项 */}
          {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={() => { /* 处理 {actionItem.label} */ }}
              >
                {actionItem.label}
              </DropdownMenuItem>
            ))}
        </DropdownMenu>
      );
    };

你可以通过点击按钮来进入或退出全屏模式

解释一下：

• getPermission("view:file")、getPermission("edit:file") 等用于检查用户是否有某项权限。
• 下拉菜单中显示的操作会根据用户权限过滤操作。
• 比如说，没有 "edit:file" 权限的用户将不会看到 "rename" 这个选项。
• 等等。

实施后，这个下拉操作的界面会像这样，只允许普通用户查看和下载文件：

如果我们限制基本用户从Kinde仪表盘上传文件：

您还会发现他们现在无法上传文件到应用程序：

1. 细化权限: 拥有更细化的权限（例如，“可以编辑元数据”与“可以编辑文件”）比赋予角色过于广泛的权限更好。这有助于避免不必要的访问并保持系统安全。
2. 自定义角色: 不要使用预定义的角色，而是为您的特定应用创建自定义角色。例如，您可以创建一个可以批准文件共享的管理员角色，或者一个只能上传但不能编辑或删除文件的投稿者角色。
3. 定期审计: 随着应用程序的发展，应定期审查角色和权限。进行审计有助于确保用户具有适当的访问权限，并防止权限逐渐过度。

通过结合Next.js，Kinde Auth和Convex DB，我们建立了一个既安全又可扩展的文件共享平台，。高级的RBAC确保用户只能执行与其角色相关的行为，从而增强了安全性和提高了工作效率。

在UI层面集成了RBAC后，我们建立了一个既灵活又易于用户操作的系统，根据用户角色安全地控制对应用功能的访问权限。这确保了用户只能访问被授权的内容，管理员则可以全面掌控整个平台。

准备好了吗？要开始了吗？那就前往Kinde开始构建你的下一个应用程序吧！现在！

• 了解RBAC
• Kinde文档中心

想深入了解文件共享应用程序的完整实现吗？可以在GitHub上查看相关的代码库。欢迎克隆、实验并根据您的需求进行调整。非常欢迎贡献和点赞！

sholajegede / Swift共享

轻松随时随地存储、分享和访问您的文件，使用安全且闪电般快速的云端服务。

这是一个使用create-next-app创建的Next.js项目。

首先，启动开发服务器。

你可以运行下面的命令之一来启动开发环境:

npm run dev
或者
yarn dev
或者
pnpm dev
或者
bun dev

这些命令都是用来启动开发环境的。

全屏查看，退出全屏

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

你可以通过修改 app/page.tsx 文件来开始编辑页面。页面会实时更新，随着你在文件中的修改。

此项目使用next/font来自动优化并加载Vercel，这是一个为Vercel设计的新字体家族。

想了解更多关于 Next.js 的内容，参考下面的资源：

• Next.js 文档 - 了解 Next.js 的特性和 API。
• 学习 Next.js - 互动的 Next.js 教程。

你可以查看一下 Next.js 的 GitHub 仓库 ，欢迎给我们反馈及贡献！

使用来自 Next.js 的团队提供的 Vercel 平台 是最简单的方法。

查看我们的Next.js 部署指南以获取更多详情。

GitHub 上查看该项目

有想法、问题或建议吗？在下面留言或直接在我的 GitHub 上联系我。您的反馈有助于我们改进和完善，确保涵盖您需要的所有内容来取得成功。告诉我们您的想法，让我们一起努力吧！