將 CASL 與 React 整合以實現強大的授權-js教程-PHP中文網

將 CASL 與 React 整合以實現強大的授權

PHPz

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

原創

375 人瀏覽過

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
};

登入後複製