쿠키와 세션 저장소를 사용하여 React에서 사용자 세션 데이터를 관리하는 방법

인증의 목적은 신원을 확인하여 권한이 있는 개인에게만 보안 리소스에 대한 액세스 권한을 부여하는 것입니다. 이 프로세스는 소프트웨어 애플리케이션을 보호하는 데 필수적인 역할을 하지만, 단일 세션 동안 반복적인 인증은 성가심을 유발할 수 있습니다.

이러한 어려움을 극복하는 한 가지 해결책은 쿠키와 세션 저장소를 사용하여 사용자 인증 세부 정보 및 기타 관련 정보를 보존함으로써 사용자가 단일 세션 내의 여러 페이지에서 인증 상태를 유지하여 사용자 경험을 개선할 수 있도록 하는 것입니다.

쿠키 및 세션 저장소를 사용하여 사용자 세션 데이터 관리

사용자 세션의 효과적인 관리는 쿠키 및 세션 저장소를 활용하여 세션 데이터를 원활하게 보존함으로써 사용자에게 필요한 보안 수준을 보호하는 동시에 맞춤형의 중단 없는 브라우징 경험을 제공하기 때문에 탄력적이고 안전한 React 애플리케이션을 구축하는 데 필수적인 요소입니다.

일반적으로 각 개인의 현재 세션 또는 막간에 고유한 사용자 세션 데이터

인증 관련 데이터는 사용자 이름 및 비밀번호 조합, 디지털 인증서, 스마트 카드, 생체 데이터 또는 기타 형태의 신원 확인 등 사용자 또는 시스템 엔티티의 신원을 확인하는 데 필요한 정보를 말합니다. 이 정보는 컴퓨터 네트워크 또는 시스템 내의 리소스 또는 서비스에 대한 액세스 권한을 부여하기 전에 사용자를 인증하는 과정에서 활용됩니다.

사용자의 개별 취향, 성향 및 구성을 기본 설정 및 설정이라고 합니다.

사용자의 과거 행동과 경험은 사용자의 선호도, 행동, 제품 또는 서비스와의 상호 작용에 대한 귀중한 통찰력을 제공할 수 있습니다. 이러한 정보를 분석함으로써 기업은 고객의 니즈를 충족하는 방법을 더 잘 이해하고 최대의 효과를 위해 제품을 최적화할 수 있습니다.

쿠키는 웹 브라우저를 통해 클라이언트의 장치에 보관되는 압축 데이터 파일입니다. 이러한 쿠키에는 일반적으로 인증 세부 정보를 추적하고 인터넷 기반 애플리케이션에서 다양한 브라우징 세션을 포괄하는 장기간에 걸쳐 사용자 세션을 보존하기 위해 사용할 수 있는 추가 개인 정보를 저장하는 데 활용되는 미세한 정보 조각이 포함되어 있습니다.

세션 저장소는 특정 브라우징 세션 동안 웹사이트가 클라이언트 측에 데이터를 저장할 수 있도록 하는 브라우저 기능입니다. 이 저장 형태는 동일한 탭 또는 창 내에서만 사용할 수 있으며 사용자가 브라우저를 닫으면 삭제됩니다.비슷한 목적을 가지고 있지만 요청할 때마다 서버로 전송되는 쿠키에 비해 세션 저장소는 사용자가 해당 웹사이트에서 활성 상태인 동안에만 액세스할 수 있으므로 범위가 더 제한적입니다. 하지만 이러한 단순성 덕분에 웹 애플리케이션에 세션별 정보를 저장하는 데 매력적인 옵션입니다.

쿠키와 세션 저장소는 사용자 세션 데이터를 관리하는 데 중요한 기능을 합니다. 쿠키는 여러 세션에 걸쳐 데이터를 보존하는 데 유용하지만, 세션 스토리지는 단일 브라우징 세션 내에서 데이터를 제한할 수 있어 가볍고 타겟팅된 저장 수단을 제공합니다.

쿠키와 세션 저장소를 활용하여 인증 세부 정보를 보존하는 데 특히 중점을 두고 사용자 세션 데이터 관리의 복잡성에 대해 자세히 알아봅시다.

React 프로젝트 설정하기

시작하기 위해 먼저 Vite를 활용하여 React 프로젝트를 설정합니다. 그런 다음 프로젝트 내에 이러한 구성 요소를 도입합니다.

 npm install js-cookie react-router-dom 

백엔드 인증 API를 통해 사용자의 로그인 자격 증명을 성공적으로 인증하면 쿠키 및 세션 저장소는 사용자 세션 전체에 걸쳐 인증 토큰, 세션 식별자 또는 기타 관련 정보를 보존해야 합니다.

사용자의 브라우저에 저장된 추가 정보와 함께 제공되는 토큰은 제한된 리소스에 대한 액세스 권한을 부여하기 전에 인증 목적으로 서버로 전송되는 후속 요청에 자동으로 통합됩니다.

이 메커니즘을 활용하면 사용자의 세션이 개별 요청의 범위를 넘어 지속될 수 있으므로 사용자가 개별적으로 문의할 때마다 인증을 재확인할 필요 없이 애플리케이션과의 중단 없는 간소화된 상호 작용을 촉진할 수 있습니다.

이 프로젝트의 소스 코드는 제공된 링크를 따라 접속할 수 있는 GitHub 저장소에서 호스팅됩니다.

쿠키를 사용하여 사용자 인증 세션 데이터 관리

로그인 양식과 관련된 JSX 요소로 구성된 기능 구성 요소가 만들어졌습니다.

사전 정의된 자격 증명을 사용하여 사용자 인증 정보의 유효성을 보장하는 프로세스에는 주어진 구성 요소 내에서 기능을 구현해야 합니다. 이 기능은 해당 컴포넌트 내에 다음 코드를 통합하여 구현할 수 있습니다.

   const testAuthData = {
    username: 'test',
    password: 'test',
  }; 
  const authenticateUser = (username, password) => {
    if (username === testAuthData.username && password === testAuthData.password) { 
      const userData = {
        username,
        password,
      };
      const expirationTime = new Date(new Date().getTime() + 60000);
      Cookies.set('auth', JSON.stringify(userData), { expires: expirationTime });
      return true;
    }
    return false;
  };
  const handleLogin = (e) => {
    e.preventDefault();
    const isAuthenticated = authenticateUser(username, password);
    if (isAuthenticated) {
      navigate('/protected');
    } else {
      // Show error message or perform other actions for failed authentication
    }
  }; 

인증 사용자 함수는 제출된 사용자 이름과 비밀번호를 미리 설정된 테스트 인증 정보와 비교하여 정확성을 검증합니다.해당되는 경우 로그인 자격 증명을 내용으로 하는 사용자 데이터 항목을 생성한 후 쿠키의 만료 기간을 결정하고 쿠키.set 작업을 통해 이 사용자 데이터를 “auth”라는 쿠키 내에 저장합니다.

인증에 성공하면 사용자는 제한된 콘텐츠에 대한 액세스 권한이 부여되고 보호된 리소스를 볼 수 있는 권한으로 인해 보안 페이지로 리디렉션됩니다. 쿠키 구현은 진행 중인 사용자 세션을 시작하는 수단으로 사용되므로 수동 입력 없이도 후속 요청에 인증 데이터를 쉽게 포함할 수 있습니다.

이 사용자 세션에서 수집된 정보를 통해 서버 소프트웨어는 사용자가 모든 요청에 대해 다시 인증을 제공할 필요 없이 개인의 신원을 확인하고 지정된 권한 또는 권한에 대한 액세스 권한을 부여할 수 있습니다.

App.jsx 파일 업데이트

사용자가 성공적으로 인증한 후에는 특정 사용자에 대한 적절한 라우팅을 위해 App.jsx 파일을 조정해야 합니다. 여기에는 애플리케이션의 특정 요구 사항에 따라 컴포넌트 계층 구조를 업데이트하거나 특정 컴포넌트에 전달되는 프로퍼티를 수정하는 작업이 포함될 수 있습니다.

 import { BrowserRouter, Route, Routes, useNavigate } from 'react-router-dom';
import Cookies from 'js-cookie';
import Login from './components/Login';

const ProtectedPage = ({ ...rest }) => {
  const isAuthenticated = !!Cookies.get('auth');
  const navigate = useNavigate();
  const handleLogout = () => { 
    Cookies.remove('auth');
    navigate('/login'); 
  };

  if (!isAuthenticated) {
    navigate('/login'); 
    return null; // Return null to prevent rendering anything else
  }

  return (
    <div>
      <h1 style={{ fontSize: '24px', color: 'blue' }}>Hello, World!</h1>
      <button style={{ marginTop: '10px' }} onClick={handleLogout}>
        Logout
      </button>
    </div>
  );
};

const App = () => {

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/protected/*" element={<ProtectedPage />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App; 

위에서 언급한 코드는 필수 요소와 해당 라우팅 로직을 설정합니다. 이 코드는 활성화되면 인증 쿠키를 삭제하고 사용자를 로그인 페이지로 안내하는 로그아웃 버튼으로 구성됩니다.

인증 쿠키의 존재를 확인하고 쿠키가 없는 경우 사용자를 로그인 페이지로 안내하는 추가 기능을 수행하는 AuthGuard 구성 요소입니다. 쿠키가 있는 경우, 보호 페이지 구성 요소는 인증된 사용자만 액세스할 수 있는 페이지를 표시합니다.

마지막으로 아래에 지정된 명령을 실행하여 개발 서버를 시작하고 애플리케이션을 테스트합니다.

 npm run dev 

웹 브라우저에서 로 이동하여 테스트 목적으로 제공된 인증 정보를 입력하세요. 로그인에 성공하면 테스트 인증 정보를 포함하는 세션 데이터로 새로운 쿠키가 생성됩니다.

쿠키는 만료 날짜에 도달하거나 로그아웃 버튼을 클릭하면 삭제되어 활성 사용자 세션이 종료되고 개인이 로그아웃됩니다.

세션 저장소를 사용하여 사용자 인증 데이터 저장

세션 저장소와 쿠키는 모두 유사한 목적을 수행합니다. 브라우저의 세션 스토리지에 관련 데이터를 저장하기 위해 sessionStorage.setItem 메서드를 사용할 수 있습니다.

  sessionStorage.setItem('auth', JSON.stringify(userData)); 

로그인 컴포넌트에 포함된 인증 사용자 함수 내에 선언을 통합하면 브라우저의 세션 저장소 내에 사용자의 인증 정보를 보존할 수 있습니다.

쿠키 및 세션 스토리지의 추가 사용 사례 살펴보기

이 가이드는 사용자 인증 정보를 보존하기 위한 쿠키 및 세션 스토리지의 활용에 대해 설명합니다. 그러나 이러한 메커니즘에는 단순한 인증 정보 보존을 넘어서는 고유한 기능이 있다는 점을 인식해야 합니다.

이러한 기능을 활용하면 추가적인 세션 정보를 처리할 수 있어 보다 안전하고 맞춤화된 사용자 상호 작용을 제공할 수 있습니다.