HOC에 반응하여 구성 요소 권한 기반으로 만들기

이것은 구성 요소의 액세스 수준을 제한하기 위해 대부분의 React 애플리케이션에서 사용한 디자인 패턴입니다.

솔루션에 대해 자세히 알아보기 전에 먼저 High Order Component(HOC)가 무엇인지 이해해 봅시다.

HOC는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. JavaScript의 High Order Functions 개념을 기반으로 하는 패턴입니다. 평신도 용어로 HOC는 구성 요소를 가져와 새 구성 요소를 반환하는 함수입니다. React API의 일부는 아니지만 React의 구성 특성에서 나온다는 단순한 사실입니다.

이 솔루션에서는 다음 기능을 사용하여 최종 결과를 얻습니다.

반응: 버전 ≥ 16.8

자바스크립트

글로벌 상태 관리: 사용자 권한을 저장하고 구성 요소 트리를 통해 전달합니다. 저는 Context-Reducer를 사용할 것입니다. Redux, MobX 또는 Zusstand 등과 같은 다른 라이브러리도 사용할 수 있습니다.

해결책:

시작하려면 특정 사용자의 권한에 따라 애플리케이션의 구성 요소 액세스 수준을 제한해야 하는 애플리케이션이 있다고 가정해 보겠습니다.

처음에는 4개의 구성 요소가 있습니다.

Component1: 사용자에게 ACCESS_COMPONENT1 권한이 있는 경우 액세스할 수 있어야 합니다.

import React from "react";

const Component1 = (props) => {
  return (
    <p>Component only accessible if user has ACCESS_COMPONENT1 permission</p>
  );
};

export default Component1;

Component2: 사용자에게 ACCESS_COMPONENT2 권한이 있는 경우 액세스할 수 있어야 합니다.

import React from "react";

const Component2 = (props) => {
  return (
    <p>Component only accessible if user has ACCESS_COMPONENT2 permission</p>
  );
};

export default Component2;

Component3: 사용자에게 ACCESS_COMPONENT3 권한이 있는 경우 액세스할 수 있어야 합니다.

import React from "react";

const Component3 = (props) => {
  return (
    <p>Component only accessible if user has ACCESS_COMPONENT3 permission</p>
  );
};

export default Component3;

App : 위의 3가지 구성 요소를 가져오는 상위 래퍼

import React from "react";
import Component1 from './Component1';
import Component2 from './Component2';
import Component3 from './Component3';

const App = (props) => {
  return (
    <div>
      <Component1 />
      <Component2 />
      <Component3 />
    </div>
  );
};

export default App;

일부 API에서 사용자 권한을 가져와서 저장하고 하위에서 사용할 수 있도록 하는 구성 요소UserPermissionProvider를 생성해 보겠습니다. 또한 저장소에 액세스하기 위해 구성 요소 트리에서 사용할 수 있는 컨텍스트를 내보냅니다UserPermissionStore.

Note: I’ll be hardcoding the permissions in this example

import React, { createContext, useState, useEffect } from "react";

export const UserPermissionStore = createContext({ userPermission: {} });

const UserPermissionProvider = (props) => {
  const { children } = props;
  const [userPermission, setUserPermission] = useState({});

  useEffect(() => {
    const permissions = {
      ACCESS_COMPONENT1: "ACCESS_COMPONENT1",
      ACCESS_COMPONENT2: "ACCESS_COMPONENT2",
      ACCESS_COMPONENT3: "ACCESS_COMPONENT3",
    };
    setUserPermission(permissions);
  }, []);

  return (
    <UserPermissionStore.Provider value={{ userPermission }}>
      {children}
    </UserPermissionStore.Provider>
  );
};

export default UserPermissionProvider;

이제 앱 구성 요소 트리가 App 컨텍스트에 액세스할 수 있도록 UserPermissionProvider 구성 요소를 UserPermissionStore 구성 요소 내의 자식으로 전달합니다.

import React from "react";
import Component1 from "./Component1";
import Component2 from "./Component2";
import Component3 from "./Component3";
import UserPermissionProvider from "./UserPermissionProvider";

const App = (props) => {
  return (
    <UserPermissionProvider>
      <div>
        <Component1 />
        <Component2 />
        <Component3 />
      </div>
    </UserPermissionProvider>
  );
};

export default App;

이제 구성 요소와 해당 구성 요소에 액세스하는 데 필요한 권한을 입력으로 사용하는 HOCwithUserPermission를 생성합니다. 제공된 권한이 유효하면 구성 요소를 반환하고 그렇지 않으면 아무 것도 반환하지 않습니다.

import React, { useContext } from "react";
import { UserPermissionStore } from "./UserPermissionProvider";

const withUserPermission = (Component, requiredPermission) => (props) => {
  const { userPermission } = useContext(UserPermissionStore);

  if (!userPermission[requiredPermission]) return null;

  return <Component {...props} />;
};

export default withUserPermission;

withUserPermission HOC를 사용하여 새로운 향상된 구성 요소를 만들 것입니다. 이 구성 요소는 액세스하는 데 필요한 권한이 사용자 권한에서 사용 가능한 경우에만 액세스할 수 있습니다.

import React from "react";
import withUserPermission from "./withUserPermission";

const Component1: React.FC = (props) => {
  return (
    <p>Component only accessible if user has ACCESS_COMPONENT1 permission</p>
  );
};

export default withUserPermission(Component1, 'ACCESS_COMPONENT1');

Note: Similarly we will update our Component2 and Component3 as well with their respective permissions.

제가 아는 가장 좋은 방법을 설명하려고 노력했습니다. 다른 사람들을 알고 있다면 모두를 위해 의견을 공유하십시오!

읽어주셔서 감사합니다. 더 많은 정보를 얻으려면 팔로우하세요.