CASL と React を統合して堅牢な認証を実現する-jsチュートリアル-php.cn

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

PHPz

リリース： 2024-09-03 22:44:40

オリジナル

328 人が閲覧しました

Integrating CASL with React for Robust Authorization

導入

承認はあらゆる 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
};

ログイン後にコピー