reactjs 使用react获取cookie

2vuwiymt 于 2022-12-12 发布在 React

关注(0)|答案(8)|浏览(1193)

我需要知道我的用户是否已连接。为此，我想读取我在服务器端设置的express-session cookie：
第一个
我尝试使用react-cookie，但即使我复制粘贴了npm react-cookie docs示例，它也不起作用：

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

reactjs

来源：https://stackoverflow.com/questions/51109559/get-cookie-with-react

8条答案

按热度按时间

lh80um4z1#

您可以使用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
国家预防措施：https://www.npmjs.com/package/js-cookie

赞(0）回复(0）举报 2022-12-12

qhhrdooz2#

如果你只想通过键得到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

赞(0）回复(0）举报 2022-12-12

i5desfxk3#

我建议使用universal-cookie，因为它更容易使用。请注意，Cookie与React无关。它们存储在浏览器中，您可以使用浏览器的默认API来获取Cookie。
下面是一个如何使用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

赞(0）回复(0）举报 2022-12-12

sf6xfgos4#

不需要第三方的npm包。你可以使用普通的JS来提取cookie。下面是一个自定义函数：

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

赞(0）回复(0）举报 2022-12-12

k3bvogb15#

您也可以在没有任何第三方软件包的情况下使用以下方法，如www.example.com中所述developer.mozilla.org：

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

赞(0）回复(0）举报 2022-12-12

0vvn1miw6#

我希望这个函数可以帮助：

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;
}

赞(0）回复(0）举报 2022-12-12

ua4mk5z47#

如果您有一个具有“httpOnly：true”属性的Cookie，则无法使用document.cookie访问它。这可能是您无法使用这些方法访问Cookie的原因。

赞(0）回复(0）举报 2022-12-12

tmb3ates8#

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

赞(0）回复(0）举报 2022-12-12

我来回答

reactjs 使用react获取cookie

8条答案

相关问题

热门标签

最新问答