리액션이 포함된 쿠키 가져오기

리액션이 포함된 쿠키 가져오기

사용자가 연결되었는지 확인해야 합니다.이를 위해 express-session을 사용하여 서버 측에서 설정한 쿠키를 읽습니다.

app.use(session({
    secret: 'crypted key',
    resave: false,
    saveUninitialized: true,
    cookie: { secure: false } // Put true if https
}))

app.post('/connect_user', (req, res) => {
    req.session.cookie.username = req.body.username
    findUserData('username', req.body.username, req, (userData) => {
        req.session.cookie.id = userData.id
        req.session.cookie.username = userData.username
        res.redirect('/profil')
    })
})

사용하려고 했습니다.react-cookienpm을 복사해서 붙여도 동작하지 않습니다.react-cookiedocs의 예:

import React from 'react';
import Landing from './Landing';
import Home from './Home';
import Profil from './Profil';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { instanceOf } from 'prop-types';
import { Cookies } from 'react-cookie';

class App extends React.Component {
    static propTypes = {
        cookies: instanceOf(Cookies).isRequired
      };
     
      constructor(props) {
        super(props);
     
        const { cookies } = props;
        this.state = {
          username: cookies.get('username')
        };
      }
    render() {
        console.log(this.state.name) 
        let homePage = (!this.state.username) ? <Landing/> : <Home/>
        return (
            <Router>
                <div>
                    <Route exact path='/' component={homePage}></Route>
                    <Route path='/profil' component={Profil}></Route>
                </div>
            </Router>
        )
    }
}

export default App;

이상하다 왜냐하면document.cookie올바른 결과를 제시하지만 어떻게 대처해야 할지 모르겠습니다.

PHPSESSID=0nv9ic8h7pv2b63lu4v7eg3mop; user_id=21; username=Ugo; SL_G_WPT_TO=fr; SL_GWPT_Show_Hide_tmp=undefined; SL_wptGlobTipTmp=undefined

사용할 수 있습니다.js-cookie패키징하여 설치할 수 있습니다.npm install js-cookie --save명령어를 입력합니다.

import React from 'react';
import Cookies from 'js-cookie';

class App extends React.Component {
     this.state = {
        username: Cookies.get('username')
     }

//  more code....
}  

문서: https://github.com/js-cookie/js-cookie

NPM : https://www.npmjs.com/package/js-cookie

만약 당신이 원하는 것이 쿠키 값을 키로 얻는 것이라면, 나는 종속성이 없는 플레인 Javascript를 사용하는 것을 추천한다.

이 예에서는 Regex의 도움을 받아 "username" 키를 사용하여 cookie 값을 가져옵니다.

let cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)username\s*\=\s*([^;]*).*$)|^.*$/, "$1");

https://developer.mozilla.org/en-US/docs/Web/API/document/cookie#Example_2_Get_a_sample_cookie_named_test2

를 사용하는 것을 추천합니다.universal-cookie사용하기 쉽기 때문에쿠키는 리액트랑 아무 상관 없어브라우저에 저장되며 브라우저의 기본 API를 사용하여 쿠키를 가져올 수 있습니다.

다음은 를 사용하는 방법의 예입니다.universal-cookies

import React from 'react';
// other imports...
import Cookies from 'universal-cookie';

const cookies = new Cookies();

class App extends React.Component {
     this.state = {
        username: cookies.get('username')
     }

//  more code....   

출처 : https://www.npmjs.com/package/universal-cookie

서드파티제의 npm 패키지는 필요 없습니다.일반 JS를 사용하여 쿠키를 추출할 수 있습니다.이를 위한 커스텀 함수를 다음에 나타냅니다.

function getCookie(key) {
  var b = document.cookie.match("(^|;)\\s*" + key + "\\s*=\\s*([^;]+)");
  return b ? b.pop() : "";
}

developer.mozilla.org에 기재되어 있는 서드파티 패키지를 사용하지 않고 다음 방법을 사용할 수도 있습니다.

const cookieValue = document.cookie
  .split('; ')
  .find((row) => row.startsWith('YOUR-COOKIE='))?
  .split('=')[1];

이 기능이 도움이 되었으면 합니다.

function getCookie(name) {
  if (document.cookie && document.cookie !== '') {
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
      var cookie = cookies[i].trim();
      if (cookie.substring(0, name.length + 1) === (name + '=')) {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
}

"httpOnly:true" 속성을 가진 쿠키가 있는 경우 document.cookie로 액세스할 수 없습니다.이러한 방법으로 cookie에 액세스하지 못한 것이 원인일 수 있습니다.

cookie = key=>((new RegExp((key || '=')+'=(.*?); ','gm')).exec(document.cookie+'; ') ||['',null])[1]
console.log(cookie('test'))

언급URL : https://stackoverflow.com/questions/51109559/get-cookie-with-react