강력한 인증을 위해 CASL을 React와 통합-JS 튜토리얼-php.cn

강력한 인증을 위해 CASL을 React와 통합

PHPz

풀어 주다： 2024-09-03 22:44:40

원래의

366명이 탐색했습니다.

Integrating CASL with React for Robust Authorization

소개

인증은 모든 웹 애플리케이션의 중요한 측면으로, 사용자가 상호 작용할 수 있는 기능과 데이터에만 액세스할 수 있도록 보장합니다. 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;

로그인 후 복사

이 예에서는 두 가지 능력을 정의합니다.

모든 사용자가 기사를 읽을 수 있습니다.
사용자는 자신이 작성한 기사만 업데이트할 수 있습니다.

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

로그인 후 복사