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

Posted

技术标签:

【中文标题】在 React (ES6) 中访问 Passport 的 req.user? API 调用将 req.user 返回为未定义【英文标题】:Accessing Passport's req.user within React (ES6)? API call returns req.user as undefined 【发布时间】:2016-04-17 07:41:47 【问题描述】:

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

我尝试将对象作为propcontext 传递,但无济于事。 此时,我决定创建一个 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 的对象,这让我感到困惑。护照会话是否仅限于某些网址或其他内容?

中间件:

    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

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

【问题讨论】:

你能尝试打印req.session.passport.user的值吗? 嘿@MichaelParker 感谢您的评论!所以我在我的两个req.user 日志下注销了req.session.passport.user,当尝试在get('*')get('/user') 中登录时,应用程序挂起,req.passport 未定义,所以错误Cannot read property 'user' of undefined 日志和应用程序崩溃。我想这有助于解决问题 - 护照不可用,有什么想法吗? 我不确定。从您迄今为止发布的内容来看,我能看到的唯一可能导致某些问题的是您的 serializeUserdeserializeUser 函数,但我认为这不会导致您在评论中提到的问题。如果您不介意将您的代码放在某种公共存储库中,我可以尝试自己站起来,看看您未在此处发布的某些代码是否存在问题。 啊,哎呀,这实际上是我的错 - 它是未定义的,因为我没有登录。它实际上确实返回到 get('*') 块,我已经更新了主帖更多信息。似乎问题是由于某种原因,护照的会话在初始渲染后消失了。 【参考方案1】:

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

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

您可以使用的各种值记录在 here。

【讨论】:

这已经为我解决了这个问题。谢谢你,先生。

以上是关于在 React (ES6) 中访问 Passport 的 req.user? API 调用将 req.user 返回为未定义的主要内容,如果未能解决你的问题,请参考以下文章

无法在事件处理程序中访问 React 实例(this)[重复]

React Native之React速学教程(下)

在使用 create-react-app 的 React 应用程序中填充 ES6 功能的最佳方法

优雅的 ES6 方式在 React 中更新状态

React,为啥在 ES6 类构造函数中使用 super(props)? [复制]

如何在 React 中使用 ES6 类设置初始状态?