javascript - 在 React (ES6) 中访问 Passport 的 req.user？ API 调用返回未定义的 req.user

Question

我正在使用 React Starter Kit 制作一个应用程序，该应用程序使用 Passport 进行身份验证。我现在正处于尝试在前端访问 req.user 对象的阶段，但是我无法将该 req.user 对象传递到 React/ES6 环境中。

我试图将对象作为 prop 和 context 传递，但无济于事。在这一点上，我决定制作一个 API 端点，在那里我可以将 req.user 的值作为 JSON 返回，但是 req.user 将作为 undefined 返回，尽管如此在 get('*') 下工作正常。

这是我进行的 GET 调用，返回 undefined:

server.get('/user', (req, res) => {
  console.info('user: ', req.user);
});

同时

server.get('*', async (req, res, next) => {
  console.info('*: ', req.user);
  // ... the rest of the React Starter Kit rendering code

确实为 req.user 返回了一个对象，这让我很困惑。 Passport session 是否仅限于某些网址或其他内容？

中间件:

    server.use(express.static(path.join(__dirname, 'public')));
    server.use(cookieParser());
    server.use(session({
      secret: 'keyboard cat',
      cookie: { httpOnly: false },
      resave: true,
      saveUninitialized: true,
    }));

    server.use(passport.initialize());
    server.use(passport.session());

序列化/反序列化非常简单:

    passport.serializeUser((user, done) => {
      console.log('serializeUser');
      done(null, user);
    });

    passport.deserializeUser((obj, done) => {
      console.log('deserializeUser');
      done(null, obj);
    });

我知道有类似的关于 req.user 未定义的 SO 线程，但似乎没有一个线程根据请求的位置有时只是未定义。感谢您的阅读和您的任何建议。干杯!

---

编辑:这是授权流程

    [initial app load with fresh server instance...]
    in (*) passport FALSE
    indexPage mounting...
    in (/user) passport FALSE
    [click login button and successfully login]
    serializeUser
    deserializeUser
    in (*) passport is TRUE
    indexPage mounting...
    in (/user) passport FALSE

我做了一些进一步的测试，并在使用 Chrome 控制台触发 API 调用时注意到一些有趣的事情。顺便说一句，我正在使用 fetch 来执行此操作 - 我执行 fetch('/user') 然后在 componentDidMount 方法中记录响应。现在，当我在 Chrome 控制台中执行此操作时:fetch(/*)，终端控制台再次登录 in (*) passport is false。

所以问题似乎是 Passport 在初始渲染后完全消失了。也许是 cookie 的问题？我将进一步调查，看看我能找到什么。

Answer 1

当使用 fetch() 时，与 XMLHttpRequest() 非常相似，您需要明确地告诉浏览器任何凭据(如 session cookie，Passport 需要它才能按顺序识别事件 session )需要与请求一起发送:

fetch('/user', { credentials : 'same-origin' }).then(...);

记录了您可以使用的各种值 here .