Frontender Libs - обзор библиотек JS / CSS

Прокси-компонент для управления доступом

Паттерн Компонент-прокси можно применить для более сложных задач, чем управление загрузкой. Его используют для инкапсуляции и разграничения прав доступа к отдельным частям интерфейса.

Прокси-компонент для контроля доступа оборачивает защищенный контент. Он обращается к AuthContext, чтобы получить роль текущего пользователя, и сравнивает её с требуемой ролью, переданной в props. В зависимости от результата проверки, прокси либо отрисовывает дочерние элементы, либо возвращает null или компонент-заглушку.

import { useContext, ReactNode } from 'react';
import { AuthContext } from './AuthContext'; // контекст создан

interface AccessControlProxyProps {
  children: ReactNode;
  requiredRole: 'admin' | 'user';
}

function AccessControlProxy({ children, requiredRole }: AccessControlProxyProps) {
  const { user } = useContext(AuthContext);

  if (user?.role !== requiredRole) {
    return null; // или <AccessDenied />
  }

  return <>{children}</>;
}

👉 @sWebDev

👍3❤1

www.tgoop.com/sWebDev/3963

859 viewsAug 18 at 07:43

Прокси-компонент для управления доступом

Паттерн Компонент-прокси можно применить для более сложных задач, чем управление загрузкой. Его используют для инкапсуляции и разграничения прав доступа к отдельным частям интерфейса.

Прокси-компонент для контроля доступа оборачивает защищенный контент. Он обращается к AuthContext, чтобы получить роль текущего пользователя, и сравнивает её с требуемой ролью, переданной в props. В зависимости от результата проверки, прокси либо отрисовывает дочерние элементы, либо возвращает null или компонент-заглушку.

import { useContext, ReactNode } from 'react';
import { AuthContext } from './AuthContext'; // контекст создан

interface AccessControlProxyProps {
  children: ReactNode;
  requiredRole: 'admin' | 'user';
}

function AccessControlProxy({ children, requiredRole }: AccessControlProxyProps) {
  const { user } = useContext(AuthContext);

  if (user?.role !== requiredRole) {
    return null; // или <AccessDenied />
  }

  return <>{children}</>;
}

BY Frontender Libs - обзор библиотек JS / CSS