在 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 环境中。
我尝试将对象作为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
的对象,这让我感到困惑。护照会话是否仅限于某些网址或其他内容?
中间件:
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
日志和应用程序崩溃。我想这有助于解决问题 - 护照不可用,有什么想法吗?
我不确定。从您迄今为止发布的内容来看,我能看到的唯一可能导致某些问题的是您的 serializeUser
和 deserializeUser
函数,但我认为这不会导致您在评论中提到的问题。如果您不介意将您的代码放在某种公共存储库中,我可以尝试自己站起来,看看您未在此处发布的某些代码是否存在问题。
啊,哎呀,这实际上是我的错 - 它是未定义的,因为我没有登录。它实际上确实返回到 get('*')
块,我已经更新了主帖更多信息。似乎问题是由于某种原因,护照的会话在初始渲染后消失了。
【参考方案1】:
当使用fetch()
时,就像XMLHttpRequest()
一样,您需要明确告诉浏览器任何凭据(如会话cookie,Passport 需要它来识别活动会话)需要与请求一起发送:
fetch('/user', credentials : 'same-origin' ).then(...);
您可以使用的各种值记录在 here。
【讨论】:
这已经为我解决了这个问题。谢谢你,先生。以上是关于在 React (ES6) 中访问 Passport 的 req.user? API 调用将 req.user 返回为未定义的主要内容,如果未能解决你的问题,请参考以下文章
无法在事件处理程序中访问 React 实例(this)[重复]
在使用 create-react-app 的 React 应用程序中填充 ES6 功能的最佳方法