React의 쿠키 및 세션 이해

키 포인트

쿠키 및 세션은 웹 개발의 중요한 구성 요소이며 사용자 데이터, 인증 및 상태를 관리하는 데 사용됩니다. 쿠키는 사용자의 장치의 웹 브라우저에서 저장된 소량의 데이터 청크이며, 세션은 사용자가 웹 사이트를 탐색하는 시간을 말합니다. react에서 RECT에서 세션 및 쿠키를 관리하기위한 모범 사례에는 다음이 포함됩니다. 및

플래그로 쿠키 보호, 세션 만료 및 토큰 새로 고침, 속성을 ​​사용하여 민감한 데이터를 암호화하고 인증 및 응용 프로그램 상태를 분리합니다.
• JS-Cookies와 같은 타사 라이브러리는 React 응용 프로그램에서 쿠키 관리를 단순화 할 수 있습니다. 보안 패치 및 개선으로부터 혜택을 받기 위해 정기적으로 종속성을 업데이트하는 것이 좋습니다.
정기 보안 감사 및 테스트는 응용 프로그램 보안을 보장하기 위해 필수적입니다. CSP (Content Security Policy)와 같은 도구 및 관행을 사용하여 보안 위험을 줄일 수 있습니다.
• document.cookie 이 기사는 쿠키 및 세션을 REACT에서 구현하기위한 기술 및 모범 사례를 탐색 할 것입니다.
쿠키와 세션은 웹 개발의 필수 구성 요소입니다. 사용자 데이터, 인증 및 상태를 관리하는 매체입니다.
• 쿠키는 사용자 장치의 웹 브라우저에 저장된 소량의 데이터 (최대 4096 바이트)입니다. 일반적인 쿠키는 다음과 같습니다 (이것은 Google 웹 로그 분석 - HttpOnly 쿠키는 키 값 쌍이있는 문자열 일뿐입니다. secure "세션"은 사용자가 웹 사이트를 탐색하는 시간을 말합니다. 그들은 일정 기간 동안 사용자의 지속적인 활동을 나타냅니다. SameSite 반응에서 쿠키 및 세션에서 강력하고 안전한 응용 프로그램을 만드는 데 도움이됩니다.
쿠키와 세션의 심층적 인 기본 사항 쿠키와 세션의 기본 사항을 이해하는 것은 동적 및 사용자 중심 웹 응용 프로그램을 개발하기위한 기초입니다.
• 이 섹션에서는 쿠키와 세션의 개념을보다 심층적 인 방식으로 탐색하여 유형, 수명주기 및 전형적인 사용 사례를 탐색합니다.
• 쿠키 ​​
쿠키는 주로 여러 요청에서 클라이언트와 서버간에 상태 데이터를 유지합니다. 쿠키를 사용하면 사용자의 기계에서 데이터를 저장하고 검색 할 수 있으므로보다 개인화 된/원활한 탐색 경험을 제공합니다. 쿠키 유형 다양한 유형의 쿠키가 있으며 각 쿠키는 의도 된 사용 사례에 적합합니다.
세션 쿠키는 일시적이며 사용자 세션 중에 만 존재합니다. 그들은 쇼핑 카트에 항목과 같은 간단한 정보를 저장합니다.
1. 영구 쿠키 는 만료 날짜가 있으며 더 오랜 시간 동안 사용자의 기계에 남아 있습니다. The Remember Me 기능과 같은 기능에 적합합니다.

   <code>名称：_ga
   值：GA1.3.210706468.1583989741
   域：.example.com
   路径：/
   过期/最大年龄：2022-03-12T05:12:53.000Z</code>

usercases in Realt
2. 사용자 인증. 사용자가 성공적으로 로그인하면 세션 토큰 또는 JWT (JSON Web Token)가 일반적으로 쿠키에 저장됩니다.

   <code class="language-javascript">// 示例：设置会话 Cookie
   document.cookie = "sessionID=abc123; path=/";</code>

사용자 환경 설정. 쿠키는 일반적으로 더 나은 개인화 된 경험을 위해 테마 선택 또는 언어 설정과 같은 사용자 선호도를 저장합니다.
세션 정의 및 사용
세션은 액세스 중에 사용자 별 데이터를 저장하는 논리적 서버 측 엔티티를 나타냅니다. 세션은 쿠키와 밀접한 관련이 있지만 다른 방식으로 저장됩니다. (쿠키 데이터는 서버에 저장됩니다.)
• 서버 측 및 클라이언트 세션 서버 측 세션

  <code class="language-javascript">// 示例：设置具有过期日期的持久性 Cookie
  document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";</code>

  에는 세션 데이터를 서버에 저장하는 것이 포함됩니다. Express.js와 같은 프레임 워크 서버 측 세션을 사용하여 사용자 상태를 관리합니다.
• 클라이언트 세션. 클라이언트 세션을 사용할 때는 세션을 복제하거나 확인하거나 노드간에 데이터 저장을 쿼리 할 필요가 없습니다. "클라이언트 세션"은 클라이언트의 세션 스토리지 정보를 참조 할 수 있지만 일반적으로 쿠키를 사용하여 세션 식별자를 저장하는 것이 포함됩니다.

  <code class="language-javascript">document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";</code>

쿠키와 세션의 미묘함을 이해하면 역동적이고 대화식 웹 애플리케이션을 구축하는 데 도움이됩니다.

다음 섹션에서는 React 응용 프로그램에서 쿠키 및 세션의 실제 구현을 살펴 봅니다.

구현 쿠키

앞에서 언급했듯이 쿠키는 웹 프로세스 및 반응 응용 프로그램의 기본 구성 요소입니다.

반응에서 쿠키를 구현하는 방법은 다음과 같습니다
api 사용 사용자 정의 후크 생성 타사 라이브러리 사용
• api 사용 React에서 쿠키를 사용하는 가장 기본적인 방법은 API를 통한 것입니다. 쿠키를 설정, 가져 오기 및 삭제할 수있는 간단한 인터페이스를 제공합니다.

  <code class="language-javascript">// 示例：在 Cookie 中存储用户偏好设置
  document.cookie = "theme=dark; path=/";</code>

  <:> 쿠키 세트 :

• <:> 쿠키 받기 :

  쿠키 삭제 :

  <code class="language-javascript">// 使用 express-session 中间件
  const express = require('express');
  const session = require('express-session');
  const app = express();
  
  app.use(session({
    secret: 'your-secret-key',
    resave: false,
    saveUninitialized: true,
  }));</code>

쿠키를 처리하기 위해 커스텀 후크를 사용하십시오 쿠키 관련 기능을 캡슐화하여 구성 요소간에 재사용 할 수 있도록 사용자 정의 반응 후크를 만듭니다.

이 사용자 정의 후크

는 쿠키의 현재 값, 새 값을 설정하는 함수 및 쿠키를 삭제하는 함수를 반환합니다.

타사 라이브러리 사용 JS-Cookies와 같은 타사 라이브러리는 React 애플리케이션에서 쿠키 관리를 단순화합니다.

<:> 설치 라이브러리 :

반응 구성 요소의 사용 :

<code>名称：_ga
值：GA1.3.210706468.1583989741
域：.example.com
路径：/
过期/最大年龄：2022-03-12T05:12:53.000Z</code>

JS-Cookies와 같은 타사 라이브러리를 사용하면 React 구성 요소에서 쿠키 관리를위한 간단하고 편리한 API를 제공합니다.

이러한 다양한 접근 방식을 이해하면 반응 응용 프로그램의 요구와 복잡성에 가장 적합한 접근 방식을 선택하는 데 도움이됩니다.

구현 세션 반응 응용 프로그램에서 세션은 서버 측에서 작동하는 반면 세션 식별자는 쿠키를 사용하여 클라이언트 측에서 작동합니다.

세션을 구현하는 방법에는 다음이 포함됩니다

서버 측 세션 토큰 기반 인증

서버 측 세션 서버 측 세션에는 서버에 세션 데이터를 저장하는 것이 포함됩니다. React에서는 Express.js 및 세션 관리 미들웨어와 같은 서버 측 프레임 워크를 사용하는 것을 의미합니다.

Express-Session을 사용하여 Express.js를 Set Set Express.js : 먼저 필요한 패키지를 설치하십시오

이제, express를 구성하십시오 :
• 세션 ID 쿠키에 서명하고 추가 보안 계층을 추가하는 데 사용됩니다.
라우팅에서 세션 사용 : 세션을 구성한 후에는 경로에서 사용할 수 있습니다.
성공적으로 로그인하면 사용자 정보가 세션에 저장됩니다. 이 정보는

경로에 대한 후속 요청으로 액세스 할 수 있습니다.

토큰 기반 인증 토큰 기반 인증은 현대 React 응용 프로그램에서 세션을 관리하는 방법입니다. 서버에서 성공적인 인증 후 토큰을 생성하고 클라이언트로 보내고 후속 요청의 헤더에 포함시킵니다.

1. 토큰 생성 및 보내기 : 서버 측에서 :

   서버는 JWT (JSON Web Token)를 생성하여 클라이언트로 보냅니다.

   <code class="language-javascript">// 示例：设置会话 Cookie
   document.cookie = "sessionID=abc123; path=/";</code>

   요청에 토큰 포함 : 클라이언트 (React) :

   <code class="language-javascript">// 示例：设置具有过期日期的持久性 Cookie
   document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";</code>

   위의 반응 컨텍스트를 사용하여 인증 상태를 관리합니다. 함수는 수신 된 토큰을 사용하여 상태를 업데이트합니다.

   secret

   요청에서 토큰 사용 : 토큰을 사용하여 요청의 헤더에 포함시킵니다.
Axios를 요청할 때 토큰이 헤더에 자동으로 추가됩니다.

2. 두 가지 방법 모두 세션을 효과적으로 관리하여 안전하고 원활한 경험을 제공하는 데 도움이됩니다.

   <code class="language-javascript">document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";</code>

   react

   에서 세션 및 쿠키 관리를위한 모범 사례 React 응용 프로그램의 세션 및 쿠키 처리는 안전하고 사용자 친화적이며 고성능 웹 애플리케이션을 구축하는 데 필수적입니다. /profile RECT 응용 프로그램이 올바르게 작동하는지 확인하려면 다음을 수행하십시오.

사용 및 로고 보호 쿠키 해당되는 경우 항상
및 로고를 포함하십시오.

• . 이 플래그는 JavaScript 또는 기타 악의적 인 코드를 통한 쿠키에 대한 공격을 방지하여 XSS (Cross-Site Scripting) 공격의 위험을 줄입니다. 쿠키는 서버에서만 액세스 할 수 있도록합니다. HttpOnly

  <code>名称：_ga
  值：GA1.3.210706468.1583989741
  域：.example.com
  路径：/
  过期/最大年龄：2022-03-12T05:12:53.000Z</code>

  . 이 플래그는 쿠키가 보안 암호화 된 연결 (HTTP)으로 만 전송되도록합니다. 악의적 인 사용자 차단의 위험을 완화 할 수 있습니다.
• 세션 만료 및 토큰 새로 고침 secure를 구현하십시오 보안 향상을 위해 세션 만료 및 토큰 새로 고침 속성을 구현하십시오. 토큰을 정기적으로 새로 고치거나 세션 만료 시간을 설정하면 무단 액세스의 위험을 완화하는 데 도움이 될 수 있습니다.

  <code class="language-javascript">// 示例：设置会话 Cookie
  document.cookie = "sessionID=abc123; path=/";</code>

토큰 새로 고침. 인증 토큰을 새로 고쳐서 사용자가 인증을 유지하는지 확인하십시오. 이는 사용자 세션이 긴 응용 프로그램과 관련이 있습니다.

<..> 세션이 만료되었습니다. 사용자 세션 기간을 제한하기 위해 합리적인 세션 만료 시간을 설정하십시오. 이것은 세션 납치를 방지하는 데 도움이됩니다.

엔드 포인트는 성공적인 인증 후 초기 JWT 토큰을 반환합니다. 엔드 포인트는 새로 고침 토큰을 사용하여 새로운 액세스 토큰을 생성합니다.
민감한 데이터를 암호화합니다 쿠키 나 세션에 민감한 정보를 직접 저장하지 마십시오. 불가피한 상황에서 민감한 데이터를 유지하려면 저장하기 전에 암호화하십시오. 암호화는 추가 보안 계층을 추가하여 악의적 인 사용자가 데이터를 가로 채더라도 민감한 정보에 액세스하기가 더 어려워집니다. 속성 사용
• 속성은 쿠키가 크로스 사이트 요청과 함께 전송 될 때를 지정하여 크로스 사이트 요청 위조 (CSRF) 공격을 방지하는 데 도움이됩니다.

<code class="language-javascript">// 示例：设置具有过期日期的持久性 Cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";</code>

. 쿠키는 제 1 자 맥락에서만 전송되므로 타사 웹 사이트가 사용자를 대신하여 요청하는 것을 방지합니다.

/login /refresh-token . 최상위 내비게이션 (예 : 링크를 클릭 할 때)을 사용하여 쿠키를 보낼 수 있지만 타사 웹 사이트에서 시작한 크로스 사이트 게시 요청 :

별도의 인증 및 응용 프로그램 상태

전체 응용 프로그램 상태를 쿠키 또는 세션에 저장하지 마십시오. 명확성을 유지하고 민감한 정보에 노출 될 위험을 최소화하기 위해 다른 응용 프로그램 관련 상태와 별도의 인증 데이터를 제공합니다.

쿠키 관리에 타사 라이브러리를 사용하십시오 쿠키 관리를 위해 성숙한 타사 라이브러리 사용을 고려하십시오. JS-Cookie와 같은 라이브러리는 기본 API의 복잡성을 추상화하는 간단하고 편리한 API를 제공합니다.

종속성에 대한 관련 업데이트 <code class="language-javascript">document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; path=/";</code> 보안 패치 및 개선으로부터 이익을 얻기 위해 타사 라이브러리 및 프레임 워크를 최신 상태로 유지하십시오. 의존성에 대한 정기적 인 업데이트는 우리의 응용 프로그램이 알려진 취약점에 취약하지 않도록합니다.

테스트 안전 측정 보안 감사 및 테스트를 위해 응용 프로그램에 정기적으로 논의하십시오. 여기에는 XSS 및 CSRF와 같은 일반적인 취약점 테스트가 포함됩니다. CSP (Content Security Policy)와 같은 보안 도구 및 관행을 사용하여 보안 위험을 줄입니다. SameSite

요약 쿠키 및 세션은 안전하고 효율적인 반응 응용 프로그램을 구축하는 데 유용한 도구입니다. 사용자 인증을 관리하거나 사용자 선호도를 보존하거나 상태의 상호 작용을 가능하게하는 데 사용됩니다.

모범 사례를 따르고 입증 된 라이브러리를 사용하여 보안 우선 순위를 정하면서 원활한 사용자 경험을 제공하는 강력하고 안정적인 응용 프로그램을 만들 수 있습니다.

이 기사가 마음에 드시면 SitePoint에서 다른 흥미로운 리소스를 확인하십시오 : .

반응 성능 최적화

2024 년 최고의 반응 차트 라이브러리 6 반응에서 조건부 렌더링을위한 기술, 예제

위 내용은 React의 쿠키 및 세션 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!