在 React (ES6) 中访问 Passport 的 req.user?API 调用将 req.user 返回为未定义

IT技术 javascript node.js express reactjs passport.js
2021-05-05 09:33:08

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

我试图将对象作为 aprop和 as传递context,但无济于事。在这一点上,我决定创建一个 API 端点,在那里我可以将 req.user 的值作为 JSONreq.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,这让我感到困惑。护照会话是否仅限于某些网址或其他内容?

中间件:

    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 console: 中执行此操作时fetch(/*),终端控制台将in (*) passport is false再次登录

所以问题似乎是护照在初始渲染后完全消失了。可能是 cookie 的问题?我将进一步调查,看看我能找到什么。

1个回答

使用时fetch(),就像 with 一样XMLHttpRequest(),您需要明确告诉浏览器任何凭据(例如会话 cookie,Passport 需要它来识别活动会话)都需要与请求一起发送:

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

此处记录您可以使用的各种值