创buildReact App + Express.js + Passport.jslogin问题

所以，我试图在后端使用Express.js创buildReact应用程序。 我在两个不同的端口上运行 – 前端是3000，后端是3001.我正在使用本地通行证策略的login系统。 login系统工作正常。 在前端，我有一个注册/login表单发送一个posthost请求localhost：3001 /注册（或login），并成功注册/login用户。然后，我有另一个路线在后端应该返回当前login的用户的数据，如果有login的用户，或者以其他方式返回具有“未authentication”消息的对象。

app.get('/loggedUserInfo', function(req, res) { if (req.user) { console.log(req.user); res.json(req.user); } else { console.log('not authenticated'); res.json({'message': 'not authenticated'}); } }); 

现在，在客户端，我想根据这个请求的响应修改导航栏。 例如，如果用户login，我想要一个包含注销button的导航栏，如果用户没有login，我想要一个带有login和注册button的导航栏。 所以，在React组件中，我有这个相关的代码：

 componentDidMount() { fetch('localhost:3001/loggedUserInfo') .then(res => console.log(res.json())); } 

这应该会改变组件的状态，但是它将响应logging到控制台，仅用于testing。 而且每一次，即使用户login，它都会返回“未通过身份validation”的对象。 这就像用户从未login过。

但是，另一方面，如果我去我的浏览器中的localhost：3001 / loggedUserInfo，在用户login后，我得到了预期的结果。 它返回我需要的用户信息。

这真的是在烦扰我，我似乎无法弄清楚为什么会发生这种情况。 我需要客户端的数据。

如果有人想看到我的app.js文件，这里是相关的代码（按顺序），我认为我包括了需要在那里的一切：

 var cookieParser = require('cookie-parser'); var session = require('express-session'); var bodyParser = require('body-parser'); var cors = require('cors'); app.use(cors()); app.use(session({ secret: 'secretKey', resave: false, saveUninitialized: true })); app.use(passport.initialize()); app.use(passport.session()); app.use(cookieParser()); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); 

Answer 1

扩大我的评论：

问题是你没有发送该cookie中的cookie。 所以你的后端永远不会得到一个cookie，对于后端，你没有login。当你直接访问url的原因是浏览器发送它（如果你尝试邮递员，你会发现它会工作）

https://developers.google.com/web/updates/2015/03/introduction-to-fetch

在这里看一下，标题为：使用提取请求发送凭证。

 fetch(url, { credentials: 'include' })