通过反应获取cookie
Get cookie with react
我需要知道我的用户是否已连接。为此,我想使用 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
文档示例:
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
我建议使用 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....
您可以使用 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....
}
如果您只想通过键获取 cookie 值,我建议使用没有任何依赖项的普通 javascript。
在这个例子中,它在 Regex 的帮助下通过键 "username" 获取 cookie 值。
let cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)username\s*\=\s*([^;]*).*$)|^.*$/, "");
不需要第三方 npm 包。您可以使用纯 JS 来提取 cookie。这是一个自定义函数:
function getCookie(key) {
var b = document.cookie.match("(^|;)\s*" + key + "\s*=\s*([^;]+)");
return b ? b.pop() : "";
}
您也可以在没有任何第 3 方包的情况下使用以下方法,如 developer.mozilla.org 中所述:
document.cookie
.split('; ')
.find(row => row.startsWith('YOUR-COOKIE='))
.split('=')[1];
你必须牢记,如果 YOUR-COOKIE
不存在,你将遇到类似 Cannot read property .split() of undefined
的错误。
希望这个功能可以帮到你:
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;
}
cookie = key=>((new RegExp((key || '=')+'=(.*?); ','gm')).exec(document.cookie+'; ') ||['',null])[1]
console.log(cookie('test'))
我需要知道我的用户是否已连接。为此,我想使用 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
文档示例:
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
我建议使用 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....
您可以使用 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....
}
如果您只想通过键获取 cookie 值,我建议使用没有任何依赖项的普通 javascript。
在这个例子中,它在 Regex 的帮助下通过键 "username" 获取 cookie 值。
let cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)username\s*\=\s*([^;]*).*$)|^.*$/, "");
不需要第三方 npm 包。您可以使用纯 JS 来提取 cookie。这是一个自定义函数:
function getCookie(key) {
var b = document.cookie.match("(^|;)\s*" + key + "\s*=\s*([^;]+)");
return b ? b.pop() : "";
}
您也可以在没有任何第 3 方包的情况下使用以下方法,如 developer.mozilla.org 中所述:
document.cookie
.split('; ')
.find(row => row.startsWith('YOUR-COOKIE='))
.split('=')[1];
你必须牢记,如果 YOUR-COOKIE
不存在,你将遇到类似 Cannot read property .split() of undefined
的错误。
希望这个功能可以帮到你:
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;
}
cookie = key=>((new RegExp((key || '=')+'=(.*?); ','gm')).exec(document.cookie+'; ') ||['',null])[1]
console.log(cookie('test'))