介绍

授权是任何 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 (
    
      {children}
    
  );
};

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

第 4 步：保护组件

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

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

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

  return (
    

      
{article.title}
      
{article.content}

      
        Edit Article
      
    
  );
}

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

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

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

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

  // proceed with editing logic
};

结论

将 CASL 与 React 集成提供了一种干净且声明式的方式来管理应用程序中的授权。通过定义功能并使用 Can 组件，您可以轻松控制用户可以看到和执行的操作，从而提高应用程序的安全性和用户体验。