Question

所以，我正在尝试在后端使用带有Express.js的Create React App。我在不同的端口上运行这两个 - 前端是3000，后端是3001.我使用本地Passport策略登录系统。登录系统工作正常。在前端，我有一个注册/登录表单，它发送一个post请求到localhost：3001 / register（或登录），它成功注册/登录用户。然后，我在后端有另一条路由应该返回当前登录用户的数据，如果有登录用户，或者返回一个带有＆＃34;未经过身份验证的对象＆＃34;消息。

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

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

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

这应该会改变组件的状态，但它会将响应记录到控制台，仅用于测试。并且每一次，即使用户登录，它也会返回＆＃34;未经过身份验证的＆＃34;宾语。就像用户从未登录一样。

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

这真的让我烦恼，我似乎无法弄清楚为什么会这样。我需要客户端的数据。

如果有人想看我的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，对于后端，你不是登录。直接访问URL时它起作用的原因是浏览器确实发送它（如果您尝试使用邮递员，您会看到它工作）

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

请看这里标题为“使用提取请求发送凭据”的部分。

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

创建React App + Express.js + Passport.js登录问题

1 个答案: