介紹

授權是任何 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 元件，您可以輕鬆控制使用者可以看到和執行的操作，從而提高應用程式的安全性和使用者體驗。