如何在 Next.js 中构建请求访问审批系统

介绍

Next.js 是一个强大的 React 框架，用于创建快速、可扩展的 Web 应用程序，支持服务器端渲染和静态站点生成。随着应用程序的增长，管理对敏感数据和资源的访问对于维护安全性和控制至关重要。这时，请求访问审批系统就显得尤为重要。

请求访问审批系统能够对组织的数字基础设施进行细粒度的访问控制。员工可以申请访问特定资源，例如机密文件或专用软件，而指定的审批人则负责审核和管理这些申请。

虽然 Next.js 本身没有提供内置功能来实现此功能，但我们可以使用Permit.io（一款强大的授权工具）来集成它。Permit.io 简化了权限的配置和管理，使其成为在 Next.js 应用程序中实现复杂访问控制的理想解决方案。

在本指南中，我们将逐步介绍如何使用 Next.js 和Permit.io构建一个请求访问审批系统。我们将创建一个演示应用程序，展示如何处理访问请求、管理审批以及强制执行权限，从而确保只有授权人员才能访问组织内的敏感信息。

🚀 加入许可证发放周：
点击此处注册

什么是“请求访问批准”？

在深入探讨之前，我们先来了解一下什么是 RAA（请求访问审批）。例如，如果开发人员需要访问生产数据库，他们会通过系统提交请求。该请求会提交给经理或授权人员进行审核。他们会根据请求者的角色和工作要求，验证其是否确实需要访问权限。

如果一切正常，他们会接受请求；否则，他们可以拒绝。这确保只有授权人员才能访问可读数据。这种做法称为请求访问审批。

我们为什么需要这个？

到目前为止，我们已经探讨了RAA（请求访问批准），但我们为什么需要它呢？它是一种强大的方法，可以保护敏感数据免受未经授权的访问，确保只有需要的人才能查看这些数据。这降低了数据泄露的风险，并帮助组织遵守各种安全法规。它还有助于简化访问权限授予流程，使其更快、更高效。

RAA系统增加了一层额外的安全保障，以保护关键信息。组织可以限制未经授权的用户访问敏感数据，这对于保护客户信息和其他机密数据至关重要。

RAA系统简化了访问请求的管理流程。管理员可以高效地审核和批准多个请求，员工也可以快速提交访问需求。这提高了组织内部的安全性和效率。

例如，员工可以通过系统提交申请，然后由经理或授权人员进行审核。他们会考虑员工的职位和信息的敏感程度等因素，然后再决定是否授予访问权限。

先决条件

要更深入地了解这个主题，你应该对 Next.js 的结构有一定的了解。你可以在这里了解更多关于 Next.js 的信息。

此外，了解最终用户的身份验证和授权机制至关重要，例如会话管理、OAuth 集成、基于角色的访问控制 (RBAC) 以及实施安全的密码哈希和存储实践。

分步指南：

设置 Next.js 项目

首先，我们来创建一个 Next.js 项目。为了节省时间，我们已经设置好了一个初始模板，您可以直接使用。

打开终端并克隆GitHub仓库。

git clone <https://github.com/Arindam200/nextjs-starter>

这将创建一个 Next.js 项目。之后，进入新创建的项目文件夹：

cd nextjs-starter

现在，我们将安装所需的依赖项。

npm install @permitio/permit-js permitio dotenv

接下来，我们将在项目根目录创建一个 .env 文件来存储环境变量。

//.env

JWT=your_jwt_token
ENV=your_environment_key

请务必将your_jwt_token和替换your_environment_key为实际值。

至此，我们的基本 Next.js 项目设置就完成了。

创建用户管理元素：

要创建访问请求元素，必须先创建用户管理元素。让我们来创建它。

1. 前往“元素”部分

2. 在“用户管理”下，点击“创建元素”。

1. 创建用户管理元素，并按如下方式分配角色：

   1. 添加名称，例如“用户管理”
   2. 选择基于角色的访问控制 (RBAC)角色
   3. 将管理员角色从“隐藏角色”部分拖到“一级 - 工作区所有者”部分。
   4. 创建元素。

创建访问请求元素

1. 点击“元素”选项

2. 在访问请求下，点击“创建元素”。

1. 选择要连接的用户管理元素。

2. 根据您的选择自定义元素。

实施访问请求和用户管理元素

现在我们将把Permit.io的访问请求元素和用户管理元素集成到 Next.js 应用程序中。

1. 首先，在 components 文件夹下，AccessRequest.tsx为访问请求元素创建一个组件：

import React from 'react'

function AccessRequest() {
  return (
    <iframe
            title="Permit Element AR"
            src="https://embed.permit.io/ar?envId=e0ffba3632274e8085d92c793d34f0c1&darkMode=false&tenantKey=default"
            width="100%"
            height="100%"
            style={{ border: 'none' }}
    />
  )
}

export default AccessRequest;

1. 接下来，创建一个用户管理组件来管理用户权限。添加以下代码UserManagement.tsx：

import React from 'react'

function UserManagement() {
  return (
    <iframe
        title="Permit Element user-management"
        src="https://embed.permit.io/user-management?envId=0ce2a34be877476f958a43b354e06756&darkMode=false"
        width="100%"
        height="100%"
        style="border: none;"
    />
  )
}

export default UserManagement;

1. 现在，创建一个组件。该组件将使用Permit.ioDashboard.tsx处理登录流程，并嵌入访问请求和用户管理元素。

'use client';
import permit, { LoginMethod } from '@permitio/permit-js';
import AccessRequest from './AccessRequest';
import UserManagement from './UserManagement';
import 'dotenv/config';
import { useEffect } from 'react';

const Dashboard = () => {
    useEffect(() => {
        const login = async () => {
            try {
                await permit.elements.login({
                    loginMethod: LoginMethod.frontendOnly,
                    userJwt: process.env.JWT,
                    tenant: 'default',
                    envId: process.env.ENV,
                });
                console.log('Login successful');
            } catch (err) {
                console.error('Login error:', err);
            }
        };

        if (process.env.JWT && process.env.ENV) {
            login();
        } else {
            console.error('JWT token or ENV variable is not defined.');
        }
    }, []);

    return (
        <div>
            <AccessRequest />
            <UserManagement />
        </div>
    );
};

export default Dashboard;

该组件使用useEffect钩子在组件挂载时运行登录函数。

登录功能用于permit.elements.login()验证用户身份：

• 它LoginMethod.frontendOnly用于客户端身份验证。

• 它从环境变量中检索 JWT 令牌和环境 ID。

• 如果登录成功，则记录成功消息；否则，记录错误。

该组件渲染两个元素iframes，分别嵌入Permit.io访问请求和用户管理元素。

1. 要使用该Dashboard组件，我们需要将其添加到要显示访问请求元素和用户管理元素的位置。在本例中，请将其添加到 page.tsx 文件中：

import Dashboard from "@/components/Dashboard";

export default function Home() {
  return (
    <main>
      <div >
        <Dashboard />
      </div>
    </main>
  );
}

完成！这就是如何使用 Next.js 实现Permit.io 的请求访问权限功能。这是客户端实现，您也可以使用服务器端实现。

运行应用程序

要启动这个项目，让我们在终端中运行以下命令：

npm run dev

这将启动我们的项目。

现在，我们访问 localhost:3000 ，将会看到以下页面：

现在，当我们请求访问权限时，管理员将收到以下内容：

如果管理员给我们访问权限，我们就可以访问受限或私有页面。

这样一来，只有授权用户才能访问我们应用程序的受限区域，如果我们授予他们权限，则只有他们才能查看这些内容。

结论

在本教程中，我们探讨了如何使用Permit.io在 Next.js 中实现请求访问批准功能。通过遵循这些步骤，您可以增强应用程序中访问管理的安全性和效率。

如果您觉得这篇文章对您有帮助，欢迎分享给其他可能受益的人。

想了解更多关于授权实现方面的知识？有任何疑问？加入Slack 社区 与团队联系。

感谢阅读：）