使用React获取cookie

Question

我需要知道我的用户是否已连接。为此，我想读取在服务器端使用express-session设置的cookie：

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-cookie，但即使我复制粘贴了 npm 上的 react-cookie 文档示例，它也无法正常工作：

Translated:

我尝试使用react-cookie，但是即使我复制粘贴了npm上react-cookie文档的示例，它仍然不能正常工作:

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

- Ugo Nicolai

Answer 1

你可以使用 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

- Subhanshu

---

为什么要使用额外的包，如果可以使用原生JS实现呢？ - Andrea D_

@AndreaD_ 因为 npm install 比理解你在做什么容易。 - sherrellbc

问题就在这里... - undefined

Answer 2

如果您只想通过键获取cookie值，我建议使用纯javascript而不使用任何依赖项。

在这个示例中，它使用正则表达式来通过键"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

- Hunter

Answer 3

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

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

- user10606394

Answer 4

我建议使用universal-cookie，因为它更简单易用。请注意，Cookie与React无关，它们存储在浏览器中，您可以使用浏览器的默认API获取Cookie。

以下是使用universal-cookie的示例：

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

该网站为“universal-cookie”软件包的官方网站。

- Matthew Barbara

---

为什么人们总是添加这个？ class App extends React.Component { 这在真正的代码中不存在。 - uberrebu

@uberrebu，你不需要 this.state = {。那只是使用 Cookies 的示例。你可以用 const myCookieData = cookies.get('username') 代替 this.state。 - Matthew Barbara

@uberrebu 这篇答案是在2018年写的。那时候，在函数组件和钩子变得普遍之前，组件的声明方式就是这样的。 - Arturo Mendes

@uberrebu 看起来对我来说就是一个标准的类组件... - undefined

Answer 5

您也可以使用下面的方法，而无需任何第三方软件包，如 developer.mozilla.org 中所述：

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

- fukit0

---

一个更好的版本，如果cookie不存在，则不会触发任何异常，而是返回undefined：document.cookie.split('; ').filter(row => row.startsWith('cookie_name=')).map(c=>c.split('=')[1])[0] - Mariano Ruiz

Answer 6

如果你的cookie属性中有"httponly:true"，那么就不能使用document.cookie访问它。这可能是导致你无法通过这些方法访问cookie的原因。

- johnnn

Answer 7

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

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

- Rahul Roy

Answer 8

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

- vishal sharma

---

在Stack Overflow上，"如何做"非常重要，但该网站质量的一个重要方面在于人们详细解释“为什么要这么做”。虽然"仅代码"的答案可以帮助提问者克服当前遇到的问题，但从长远来看，这种回答对他们和未来的访问者没有太大好处。请参阅是否存在仅包含代码的回答的优点？。 - Steve

虽然此代码可以回答问题，但提供关于它是如何解决问题的额外上下文会提高答案的长期价值。您可以在帮助中心找到有关撰写好答案的更多信息：https://stackoverflow.com/help/how-to-answer 。祝好运！ - nima