Введение

Авторизация — важнейший аспект любого веб-приложения, гарантирующий, что пользователи имеют доступ только к тем функциям и данным, с которыми им разрешено взаимодействовать. CASL (расшифровывается как «Контроль доступа на основе возможностей») — это популярная библиотека JavaScript для гибкой и декларативной обработки этой логики. В этой статье мы расскажем, как интегрировать CASL с приложением React, предоставив вам инструменты для реализации эффективной авторизации.

Предварительные условия

Прежде чем приступить к интеграции, вы должны ознакомиться со следующим:

• Базовое понимание React.
• Знакомство с управлением состоянием в React.
• Базовые знания JavaScript ES6.

Шаг 1. Настройка CASL

установка npm @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 (
    
      {children}
    
  );
};

export const useAbility = () => useContext(AbilityContext);

Шаг 4. Защита компонентов

Теперь, когда вы настроили контекст, вы можете защитить свои компоненты с помощью компонента Can, предоставленного @casl/react.

import { Can } from '@casl/react';

function Article({ article }) {
  const ability = useAbility();

  return (
    

      
{article.title}
      
{article.content}

      Edit Article
      
  );
}

Здесь кнопка «Редактировать статью» будет видна только в том случае, если у пользователя есть разрешение на обновление статьи.

Шаг 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, вы можете легко контролировать, что пользователи могут видеть и делать, улучшая как безопасность, так и удобство использования вашего приложения.