Nuxt 授权：如何实现细粒度访问控制

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

在本教程中，您将学习如何使用Cerbos为任何Nuxt Web 应用程序添加细粒度的访问控制，从而简化授权过程。

在GitHub上查看 Nuxt 应用程序中 Cerbos 集成的工作示例。

先决条件

• 一个可运行的Nuxt Web 应用程序
• 您的工作环境中已安装Docker

步骤

满足上述前提条件后，步骤如下：

• 设置 Cerbos 策略库
• 设置 Cerbos PDP
• 将 Cerbos 客户端添加到您的 Nuxt 应用程序中
• 创建 API 路由
• 对 Nuxt 页面和组件进行权限检查

设置 Cerbos 策略库

Cerbos策略库是一组YAML文件的集合，用于定义应用程序的访问控制规则。它对于指定应用程序内哪些用户可以执行哪些操作至关重要。这些策略规定了不同用户角色可以对各种资源执行哪些操作。

资源是一个特定于应用程序的概念，适用于任何需要访问规则的对象。例如，文档就是一种资源，不同的用户可以根据访问控制规则对其进行修改、查看、删除等操作。请阅读我们的文档，了解更多关于构建策略库的最佳实践。

您的 Cerbos 策略存储库可以存储在您的磁盘、Git 或任何与 S3 兼容的存储系统中。要在 Nuxt 应用程序中将 Cerbos 策略存储库设置在磁盘上，请执行以下操作：

• 在项目根目录下创建一个cerbos文件夹，然后policies在该文件夹内创建一个子文件夹。
• 在该policies文件夹内，创建一个 YAML 文件，其中包含 Nuxt 应用程序中执行权限检查的规则。例如，创建一个documents.yaml资源策略文件。
• 在文件中添加documents.yaml可对文档执行的操作规则，请查看以下示例。更多信息请参阅 Cerbos资源策略文档。

---
apiVersion: api.cerbos.dev/v1
resourcePolicy:
  version: default
  resource: document
  rules:
    - actions: ['view', 'change', 'destroy']
      effect: EFFECT_ALLOW
      roles:
        - admin
    - actions: ['view', 'change']
      effect: EFFECT_ALLOW
      roles:
        - user
      condition:
        match:
          expr: request.resource.attr.author == request.principal.id

现在我们已经定义了一个简单的资源策略文件documents.yaml，允许管理员用户访问view系统中的任何change资源。非管理员用户如果同时也是文档作者，则可以访问该资源。destroydocumentviewchangedocument

请注意，我们需要为不同类型的资源和主体分别创建策略文件。为了演示这一点，在链接的GitHub示例中，除了主要策略文件外，还有一个contacts.yaml资源策略文件documents.yaml。

通过定义上下文感知角色、模式、范围、测试以及Cerbos 综合文档中解释的各种其他功能，可以进一步丰富 Cerbos 策略存储库。

设置 Cerbos PDP

Cerbos PDP 是策略决策点，它是一个根据授权策略评估应用程序请求以做出访问决策的组件；确定是否允许用户对资源执行操作。

在本演示中，我们将使用之前创建的目录，在您的代码仓库中设置一个单独的 Cerbos PDP 模块cerbos。要在本地运行 Cerbos PDP，请执行以下操作：

• 在目录中创建一个 Cerbos PDP 服务器配置文件cerbos。您可以将其命名为conf.yaml.
• 最简单的配置方法是在配置conf.yaml文件中定义用于监听 HTTP（和/或 gRPC）请求的端口以及 Cerbos 策略存储库的位置。最简单的conf.yaml配置文件如下所示：

---
server:
  httpListenAddr: ":3592"
storage:
  driver: "disk"
  disk:
    directory: /policies

如需更强大的配置，请务必查看我们的Cerbos PDP 配置文档。

您的 Cerbos 相关文件结构现在可能如下所示：

.
├── cerbos
│   └── policies
│       ├── documents.yaml
│       └── contacts.yaml
└── conf.yaml

将终端窗口置于该cerbos目录下。如果您已安装 Docker，则只需运行以下命令即可在 Docker 容器中本地启动 Cerbos PDP。

docker run --rm --name cerbos -t \
  -v $(pwd)/policies:/policies \
  -p 3592:3592 \
  ghcr.io/cerbos/cerbos:latest server
  --config=conf.yaml 

Cerbos PDP 作为独立进程运行，与您的 Nuxt 应用程序互不干扰。这里，我们将其作为独立服务运行在 Docker 容器中，但这并非强制要求。Cerbos 的设计使其能够适应您的基础架构。因此，如果您想将 Cerbos PDP 作为服务、边车或 Lambda 函数运行，请查阅 Cerbos 部署文档，了解更多关于 Cerbos部署模式的信息。

将 Cerbos 客户端添加到您的 Nuxt 应用程序中

添加 Cerbos 客户端对于简化 Nuxt 应用程序与 Cerbos PDP 之间的通信至关重要。该客户端允许您以优雅的方式从 Nuxt 应用程序进行用户权限检查。

要将 Cerbos 客户端添加到您的 Nuxt 应用程序，请按照以下步骤操作：

• 选择您要使用的 Cerbos 客户端。
  • 在服务器端应用程序中，可以选择@cerbos/http用于 HTTP 交互或gRPC。@cerbos/grpc
• npm install使用以下命令安装所选客户端软件包
• 在你的 Nuxt 项目中，在utils文件夹中创建一个实用程序文件cerbos.ts来实例化 Cerbos 客户端。
• 导出实例以便在您的 Nuxt 应用程序中重复使用。

上述cerbos.ts文件内容大致如下：

import { HTTP as Cerbos} from "@cerbos/http";

export const cerbos = new Cerbos("localhost:3592");

创建 API 路由

Nuxt API 路由是 Nuxt.js 中的一项功能，用于定义服务器端逻辑并处理 Nuxt 应用程序中的 HTTP 请求。这些路由允许开发人员在 Nuxt 项目中创建各种后端功能，例如数据获取、表单提交，或者在本例中实现身份验证。

在 Nuxt 中为 Cerbos 权限检查创建 API 路由：

• 在Nuxt 应用程序的文件夹isAllowed.ts中创建一个文件。server/api
• 定义并导出事件处理程序
  • 在isAllowed.ts文件中，使用defineEventHandlerfromnuxt-helpers导出您的 API 处理函数。
  • 在此函数中，调用 Cerbos.isAllowed(...)方法，根据请求的用户和资源详细信息检查用户权限。

import { cerbos } from "../utils/cerbos";
// Pull the user info from the session in your Nuxt applications

const user = {
    id: "000012345",
    roles: ["user"]
  }

export default defineEventHandler(async (event) => {
    const query = getQuery(event)

    const document = {
        id: query.documentId as string
    }

    const requestBody = {
        principal: user,
        resource: { // Pull the resource info from the data storage in your Nuxt applications. Pass Resource ID within the event as a query param, like we did here.
          kind: "document",
          id: document.id,
          attributes: {
            author: "000012347"
          }
        },
        action: "approve"
      }    

    const isAllowed = await cerbos.isAllowed(requestBody)
    .catch( (error)=> {
      console.log( error );
      return false;
    })
})

搞定了！现在你可以在/api/isAllowedNuxt 应用程序的所有页面和组件中统一调用这个 API 了。

对 Nuxt 页面和组件进行权限检查

让我们来看看 Cerbos 权限检查在 Nuxt 应用程序页面中的实际应用。假设我们已经为路径下的每个文档创建了一个页面/documents/[id]。为此：

• 在应用程序文件夹documents下创建一个文件夹。pages
• 在文件夹内documents创建一个[id].vue文件。

Nuxt 提供路由验证功能，您可以通过每个需要验证的页面中validate的属性进行验证。该属性接受路由作为参数。definePageMeta()validate

要使用上一步中定义的路由，您可以将以下代码片段添加到您最近创建的（或任何其他 vue）文件/api/isAllowed的底部。[id].vue

definePageMeta({
  validate: async (route) => {
    const { data: isAllowed } = await useFetch('/api/isAllowed', 
    {
      headers: useRequestHeaders(),
      query: { documentId: route.params.id }
    })
    return isAllowed.value;
  }
})

就这么简单！

总结

要在 Nuxt 应用程序中使用 Cerbos 授权，您只需执行以下操作：

• 创建 Cerbos 策略，用于决定谁可以在您的应用程序中执行哪些操作。
• 运行 Cerbos PDP，该 PDP 在被调用时将检查这些策略，
• 在您的 Nuxt 应用程序中安装 Cerbos 客户端，
• 创建 API 路由，以便在您的 Nuxt 应用程序中使用它。
• 开始调用导出的 API 路由来执行 Cerbos.isAllowed(...)检查，并确定是否应该允许您的应用程序用户对特定资源执行特定操作。

后续步骤

在本教程中，您学习了如何使用 Cerbos 为 Nuxt 应用程序添加细粒度的访问控制。如果您喜欢本教程，请务必访问Cerbos Hub。

Cerbos Hub 可帮助您节省管理和同步所有应用程序和服务中 Cerbos PDP 和策略库的时间。它有助于连接您的 Cerbos 策略库和 Cerbos PDP 实例，并从单一位置协作、顺畅地管理它们。

我们还发布了一系列文章，其中包含有关如何开始使用 Cerbos Hub 的分步说明。如果您有兴趣了解它的工作原理，请查看这些文章！