通过反应获取 cookie [英] Get cookie with react
问题描述
我需要知道我的用户是否已连接.为此,我想使用 express-session 读取我在服务器端设置的 cookie:
app.use(session({秘密:'加密密钥',重新保存:假,保存未初始化:真,cookie: { secure: false }//如果 https 则设为 true}))
app.post('/connect_user', (req, res) => {req.session.cookie.username = req.body.usernamefindUserData('username', req.body.username, req, (userData) => {req.session.cookie.id = userData.idreq.session.cookie.username = userData.usernameres.redirect('/profil')})})
我尝试使用 react-cookie
但它不起作用,即使我复制粘贴了 npm react-cookie
文档示例:
从'react'导入React;从'./Landing'导入登陆;从'./Home'导入首页;从./Profil"导入配置文件;import { BrowserRouter as Router, Route } from 'react-router-dom';从道具类型"导入 { instanceOf };从'react-cookie'导入{cookies};类 App 扩展了 React.Component {静态 propTypes = {饼干: instanceOf(Cookies).isRequired};构造函数(道具){超级(道具);const { cookies } = props;this.state = {用户名:cookies.get('用户名')};}使成为() {console.log(this.state.name)让 homePage = (!this.state.username) ?<着陆/>:<主页/>返回 (<路由器><div><路由精确路径='/' component={homePage}></Route><Route path='/profil' component={Profil}></Route>
</路由器>)}}导出默认应用程序;
这很奇怪,因为 document.cookie
呈现了正确的结果,但我不知道如何处理它:
PHPSESSID=0nv9ic8h7pv2b63lu4v7eg3mop;user_id=21;用户名=乌戈;SL_G_WPT_TO=fr;SL_GWPT_Show_Hide_tmp=未定义;SL_wptGlobTipTmp=未定义
你可以使用 js-cookie
包,并且可以使用 npm install js-cookie --save
安装它> 命令.
从'react'导入React;从 'js-cookie' 导入 Cookie;类 App 扩展了 React.Component {this.state = {用户名:Cookies.get('用户名')}//更多代码....}
文档:https://github.com/js-cookie/js-cookie
NPM:https://www.npmjs.com/package/js-cookie
I need to know if my user is connected or not. For that I want to read the cookies that I set in the server side with 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')
})
})
I tried to use react-cookie
but it doesn't work even though I copy-pasted the npm react-cookie
docs example:
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;
It's weird because document.cookie
renders the correct result, but I don't know how handle it:
PHPSESSID=0nv9ic8h7pv2b63lu4v7eg3mop; user_id=21; username=Ugo; SL_G_WPT_TO=fr; SL_GWPT_Show_Hide_tmp=undefined; SL_wptGlobTipTmp=undefined
You can use js-cookie
package and can install it using npm install js-cookie --save
command.
import React from 'react';
import Cookies from 'js-cookie';
class App extends React.Component {
this.state = {
username: Cookies.get('username')
}
// more code....
}
Documentation : https://github.com/js-cookie/js-cookie
NPM : https://www.npmjs.com/package/js-cookie
这篇关于通过反应获取 cookie的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!