React에서 사용자 세션을 관리하는 가장 좋은 방법은 무엇입니까?

React에서 사용자 세션을 관리하는 가장 좋은 방법은 무엇입니까?

MVC 등 React에서 사용자 세션을 관리하는 방법에 대해 의문이 있습니다.NET 이 작업은 Session 개체(예: Session 개체)를 통해서만 수행할 수 있습니다.Session["test"] = "";하지만 React는 이 작업을 수행할 수 없습니다.

컴포넌트 상태 사용에 대해 읽었는데, 주 컴포넌트 상태를 설정하고 소품을 사용하여 이 상태를 다른 컴포넌트로 전달합니다.그리고 브라우저의 사용을 추천하는 사람들도 봤어요.localStorage이게 좋은 생각인지 연습인지 모르겠어요.

React에서 세션 변수를 관리하는 더 나은 방법이 있습니까?localStorage아니면 쿠키?

컴포넌트 상태 사용은 관리가 어렵고 트러블 슈팅이 어려운 문제가 발생하기 쉽기 때문에 피하는 것이 좋습니다.

둘 중 하나를 사용해야 합니다.cookies또는localStorage사용자의 세션 데이터를 보관합니다.닫힘을 랩퍼로 사용할 수도 있습니다.cookie또는localStorage데이터.

여기 간단한 예가 있습니다.UserProfile사용자 이름을 유지할 닫힘.

var UserProfile = (function() {
  var full_name = "";

  var getName = function() {
    return full_name;    // Or pull this from cookie/localStorage
  };

  var setName = function(name) {
    full_name = name;     
    // Also set this in cookie/localStorage
  };

  return {
    getName: getName,
    setName: setName
  }

})();

export default UserProfile;

사용자가 로그인할 때 이 개체에 사용자 이름, 전자 메일 주소 등을 채울 수 있습니다.

import UserProfile from './UserProfile';

UserProfile.setName("Some Guy");

그런 다음 필요할 때 앱의 모든 구성 요소에서 이 데이터를 가져올 수 있습니다.

import UserProfile from './UserProfile';

UserProfile.getName();

클로저를 사용하면 글로벌 네임스페이스 외부에 데이터를 보관하고 앱 내 어디에서나 쉽게 액세스할 수 있습니다.

리액트 모듈에는react-client-session클라이언트 측 세션 데이터를 매우 쉽게 저장할 수 있습니다.기트 레포는 여기 있습니다.

이것은 다른 답변의 클로즈 어프로치와 같은 방법으로 구현되지만, 3개의 다른 지속성 스토어를 사용한 지속성도 지원합니다.기본 저장소는 메모리(지속적이지 않음)입니다.

1. 쿠키
2. local 스토리지
3. 세션 스토리지

설치 후 루트 컴포넌트를 마운트할 스토어 유형을 설정하기만 하면 됩니다.

import { ReactSession } from 'react-client-session';

ReactSession.setStoreType("localStorage");

... 앱 내 어디에서나 키 값 쌍을 설정/취득할 수 있습니다.

import { ReactSession }  from 'react-client-session';

ReactSession.set("username", "Bob");
ReactSession.get("username");  // Returns "Bob"

이 방법은 웹 토큰을 사용하여 저장할 데이터를 암호화할 수 있는 응답 세션을 관리하는 최선의 방법이 아닙니다.다양한 서비스를 이용할 수 있습니다.인기 있는 서비스는 웹토큰이 있는 JSON 웹토큰(JWT)입니다.클라이언트로부터의 조작이 없는 경우, 잠시 후에 로그아웃 할 수 있습니다.또, 토큰을 작성한 후에는, 로컬 스토리지에 보존할 수 있기 때문에, 액세스 할 수 있습니다.

jwt.sign({user}, 'secretkey', { expiresIn: '30s' }, (err, token) => {
    res.json({
      token
  });

여기서 user 객체는 세션에서 유지할 사용자 데이터입니다.

localStorage.setItem('session',JSON.stringify(token));

예를 들어 세션 관리에 적합한 API를 가진 redux-react-session을 사용할 수 있습니다.initSessionService,refreshFromLocalStorage,checkAuth리리 른 ,, 음음, 음음다음alityalityalityalityality 、 、 it 、 it 、 it 、 it 、 it 、 it 、 it 、 、 。Immutable JS.

또는 다음과 같은 옵션을 제공하는 react-web-session을 활용할 수 있습니다.callback ★★★★★★★★★★★★★★★★★」timeout

언급URL : https://stackoverflow.com/questions/42420531/what-is-the-best-way-to-manage-a-users-session-in-react