CASL と React を統合して堅牢な認証を実現する

導入

承認はあらゆる Web アプリケーションの重要な側面であり、ユーザーが操作を許可されている機能とデータにのみアクセスできるようにします。 CASL (「Capability-based Access Control」の略) は、このロジックを柔軟かつ宣言的な方法で処理するための一般的な 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;

この例では、2 つの能力を定義します:

• すべてのユーザーが記事を読むことができます。
• ユーザーは自分が作成した記事のみを更新できます。

ステップ 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
};

結論

CASL を React と統合すると、アプリケーションでの承認を管理するクリーンで宣言的な方法が提供されます。機能を定義し、Can コンポーネントを使用すると、ユーザーが表示できる内容と実行できる内容を簡単に制御でき、アプリのセキュリティとユーザー エクスペリエンスの両方が向上します。

以上がCASL と React を統合して堅牢な認証を実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。