>

React에서 사용자 세션을 관리하는 방법에 대한 의문이 있습니다 (예 : MVC .NET에서) 당신은 단지 Session 객체 (예 : Session["test"] = ""; )를 사용 하여이 작업을 수행합니다 ), 그러나 분명히 React는 이것을 할 수 없습니다.

컴포넌트 상태 사용에 대해 읽고 있었는데, 주 ​​컴포넌트에서 상태를 설정하고 props를 사용하여이 상태를 다른 컴포넌트로 전달한다고 가정합니다. 또한 사람들이 브라우저의 localStorage 사용을 권장하는 것을 보았습니다.  또는 쿠키이지만, 이것이 좋은 아이디어인지 연습인지 모르겠습니다.

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

  • 답변 # 1

    관리하기 어려울 수 있고 문제를 해결하기 어려운 문제가 발생하기 쉬우므로 구성 요소 상태를 사용하지 마십시오.

    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();
    
    

    클로저를 사용하면 데이터가 전역 네임 스페이스 외부에 유지되므로 앱의 어느 곳에서나 쉽게 액세스 할 수 있습니다.

  • 답변 # 2

    이 방법으로 세션을 관리하는 가장 좋은 방법은 아닙니다. 웹 토큰을 사용하여 저장하려는 데이터를 암호화 할 수 있습니다. 널리 사용되는 다양한 서비스를 사용할 수 있습니다. 웹 토큰을 사용하면 클라이언트의 조치가 없으면 잠시 후 로그 아웃 할 수 있으며 토큰을 작성한 후 로컬 스토리지에 저장하여 쉽게 액세스 할 수 있습니다.

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

    여기에있는 사용자 개체는 세션에서 유지하려는 사용자 데이터입니다.

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

  • 답변 # 3

    예를 들어, initSessionService 와 같은 세션 관리를위한 API가 좋은 redux-react-session을 사용할 수 있습니다. refreshFromLocalStorage checkAuth  그리고 다른 많은. 또한 Immutable JS 와 같은 고급 기능을 제공합니다 .

    또는 callback 와 같은 옵션을 제공하는 반응 웹 세션을 활용할 수 있습니다  그리고 timeout .

  • 이전 Android LinearSnapHelper - 안드로이드 linearsnaphelper - 스크롤/스냅 핑 속도를 높이는 방법은 무엇입니까?
  • 다음 c# - 객체의 배열 목록을 확장하면 새로운 객체가됩니까?