时间戳

首页 > 解决方案 > React + Express 与 Passport.js

node.js - React + Express 与 Passport.js

问题描述

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

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

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

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

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

我可以从我的反应应用程序调用到达此端点，并在 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.jsreactjsexpresspassport.js

解决方案

听起来您的 React 应用程序正在通过 ajax 使用类似fetch.

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

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

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

如果您正在使用react-router，他们有一些示例代码可能会有所帮助。

推荐阅读