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

소개

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

결론

CASL을 React와 통합하면 애플리케이션에서 인증을 관리하는 깔끔하고 선언적인 방법이 제공됩니다. 기능을 정의하고 Can 구성 요소를 사용하면 사용자가 보고 수행할 수 있는 항목을 쉽게 제어할 수 있어 앱의 보안과 사용자 경험이 모두 향상됩니다.

위 내용은 강력한 인증을 위해 CASL을 React와 통합의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!