将 CASL 与 React 集成以实现强大的授权-js教程-PHP中文网

将 CASL 与 React 集成以实现强大的授权

PHPz

发布： 2024-09-03 22:44:40

原创

395 人浏览过

Integrating CASL with React for Robust Authorization

介绍

授权是任何 Web 应用程序的一个关键方面，确保用户只能访问允许他们交互的功能和数据。 CASL（代表“基于能力的访问控制”）是一个流行的 JavaScript 库，用于以灵活的声明性方式处理此逻辑。在本文中，我们将介绍如何将 CASL 与 React 应用程序集成，为您提供实现有效授权的工具。

先决条件

在深入进行集成之前，您应该熟悉以下内容：

对 React 的基本了解。
熟悉 React 中的状态管理。
JavaScript ES6+ 基础知识。

第 1 步：设置 CASL

npm install @casl/ability @casl/react

第 2 步：定义能力

能力定义用户可以对特定资源执行哪些操作。让我们从创建一个能力实例开始。

import { Ability } from '@casl/ability';

const defineAbilitiesFor = (user) => {
  return new Ability([
    {
      action: 'read',
      subject: 'Article',
    },
    {
      action: 'update',
      subject: 'Article',
      conditions: { authorId: user.id },
    },
  ]);
};

export default defineAbilitiesFor;

登录后复制

在这个例子中，我们定义了两种能力：

所有用户都可以阅读文章。
用户只能更新自己撰写的文章。

第 3 步：将 CASL 与 React 集成

要在 React 组件中使用这些功能，您可以创建一个上下文来在整个应用程序中提供功能实例。

import React, { createContext, useContext } from 'react';
import { Ability } from '@casl/ability';

const AbilityContext = createContext();

export const AbilityProvider = ({ children, user }) => {
  const ability = defineAbilitiesFor(user);

  return (
    <AbilityContext.Provider value={ability}>
      {children}
    </AbilityContext.Provider>
  );
};

export const useAbility = () => useContext(AbilityContext);

登录后复制

第 4 步：保护组件

现在您已经设置了上下文，您可以使用 @casl/react 提供的 Can 组件来保护您的组件。

import { Can } from '@casl/react';

function Article({ article }) {
  const ability = useAbility();

  return (
    <div>
      <h1>{article.title}</h1>
      <p>{article.content}</p>

      <Can I="update" a="Article">
        <button>Edit Article</button>
      </Can>
    </div>
  );
}

登录后复制

这里，“编辑文章”按钮仅在用户有权更新文章时才可见。

第5步：处理未经授权的访问

CASL 还可以帮助管理用户尝试未经授权的操作时发生的情况。这可以通过检查事件处理程序或 API 调用中的能力来完成。

const handleEdit = () => {
  if (!ability.can('update', article)) {
    alert('You are not allowed to edit this article!');
    return;
  }

  // proceed with editing logic
};

登录后复制