React + Express 与 Passport.js答案

【问题标题】：React + Express With Passport.jsReact + Express 与 Passport.js
【发布时间】：2020-06-19 09:25:09
【问题描述】：

我正在使用 React 和 Express JS 设置一个全栈应用程序。

我正在使用 Passport.js 进行身份验证，但遇到了一个小问题...

所以我的前端和后端是两个独立的包，在两个不同的端口上运行。在我的 express 应用上，我创建了如下所示的路线。

app.post('/api/account/login', (req, res, next) => {
    passport.authenticate('local', {
      successRedirect: '/dashboard',
      failureRedirect: '/users/login',
    }) (req, res, next);
  });

就 Passport.js 而言，这是相当标准的。基本上，如果它验证了我提供的凭据，那么它应该将我重定向到 /dashboard。如果没有，那就去其他提到的路线。

我可以从我的 react 应用程序调用到达此端点，并在 chrome 的网络选项卡中获得如下正确响应。

Request URL: http://localhost:3000/dashboard
Request Method: GET
Status Code: 304 Not Modified
Remote Address: 127.0.0.1:3000
Referrer Policy: no-referrer-when-downgrade

但是，它实际上并没有将我重定向到 /dashboard。这种方式不可以吗？

谢谢。

【问题讨论】：

标签： node.js reactjs express passport.js

【解决方案1】：

听起来您的 React 应用程序正在使用 fetch 之类的东西通过 ajax 调用路由。

您使用 Passport 的方式假定浏览器直接发出请求。成功登录后，Passport 会返回一个重定向响应（HTTP 302 或类似），浏览器会接受该响应并将用户重定向到该响应。

Ajax 请求不能以这种方式工作，因为没有发生任何导航。

您需要在 React 方面自己处理这个问题。您的 Express 应用程序需要通过（例如）返回带有令牌的 JSON 消息或存储会话 cookie 来处理会话身份验证。您需要更新您的 React 应用以识别这一点，然后通过客户端 Javascript 导航到正确的路线。

如果您使用的是react-router，他们有一些sample code 可能会有所帮助。

【讨论】：

是的，我正在使用 fetch。嗯，passport.js 不会创建会话 cookie 吗？所以你说要到达 /login API 端点，并让它响应“已验证”或“未验证”并在 React 应用程序中读取该消息？然后根据那个重定向？
是的，没错。我最近做了一些非常相似的事情，但是使用 Vue 而不是 React。我只是返回了一个类似于{ authenticated: true } 的json 结果，然后使用vue-router 导航到所需的页面。
近期需要牢记的一点：会话 cookie 在跨源 fetch 请求中无法正确设置。我建议在同一个本地端口上运行您的两个应用程序。我使用了 webpack-dev-server 中的proxy 设置，让我的服务器看起来和我的前端运行在同一个端口上。请参阅fetch docs 了解更多信息。
这对于生产来说是一个可行的解决方案吗？
我不能这样做，然后在生产中，只需执行 npm run build 并使用静态文件吗？