Node.js 在Google Oauth2之后,如何从我的服务器重新返回到客户端?
我已经在react/node/express/mongodb应用程序中实现了googleoauth2。我能够成功地进行身份验证,但身份验证后的重定向将我发送到服务器端路由,而不是返回我希望在客户端呈现的页面(在/posts路由) 我接收存储在数据库中的帖子的JSON,而不是客户端UI,这是我从服务器发送回来的 我的服务器在localhost:5000上运行,我的客户端应用程序在localhost:3000上运行。我在package.json中设置了http代理中间件和代理声明。你知道怎么解决这个问题吗 谷歌OAuth路线:Node.js 在Google Oauth2之后,如何从我的服务器重新返回到客户端?,node.js,reactjs,redirect,oauth,google-oauth,Node.js,Reactjs,Redirect,Oauth,Google Oauth,我已经在react/node/express/mongodb应用程序中实现了googleoauth2。我能够成功地进行身份验证,但身份验证后的重定向将我发送到服务器端路由,而不是返回我希望在客户端呈现的页面(在/posts路由) 我接收存储在数据库中的帖子的JSON,而不是客户端UI,这是我从服务器发送回来的 我的服务器在localhost:5000上运行,我的客户端应用程序在localhost:3000上运行。我在package.json中设置了http代理中间件和代理声明。你知道怎么解决这个
router.get("/google", passport.authenticate("google", {
scope: ["profile", "email"]
}));
router.get("/google/posts",
passport.authenticate("google"),
(req, res) => {
console.log("Successful auth");
res.redirect("/posts");
});
/发帖路线(网页):
React App.js呈现方法:
render() {
return (
<div className="App">
<Router>
<UserProvider>
<Navbar />
<Route path="/" exact
render={() => {
return <Home currentUser={this.props.currentUser} />;
}} />
<Route path="/login" exact render={() => {
return <Login />
}} />
<Route path="/signup" exact component={Signup} />
<Route path="/create" exact component={CreatePost} />
</UserProvider>
</Router>
</div>
);
}
render(){
返回(
{
返回;
}} />
{
返回
}} />
);
}
登录渲染组件:
render() {
if (this.state.redirectTo) {
return <Redirect to={ {pathname: this.state.redirectTo} } />;
} else {
return(
<div>
...
<a href="/auth/google" onClick={() => window.location="/auth/google"}>Login with Google</a>
</div>
);
}
render(){
if(this.state.redirectTo){
返回;
}否则{
返回(
...
);
}
在Home组件中,我正在呈现帖子,它使用Axios请求获取数据库中的所有帖子
员额构成部分:
getPosts() {
axios.get("/posts").then(res => {
this.setState({
posts: res.data
})
}).catch(err => console.log(err));
}
render() {
return (
<div className="blog-container">
{
this.state.posts.map((post, index) => {
return(
<Post
key={post._id}
id={post._id}
title={post.title}
content={post.content}
date={post.date}
comments={post.comments}
/>
);
})
}
</div>
);
}
}
getPosts(){
get(“/posts”)。然后(res=>{
这是我的国家({
职位:res.data
})
}).catch(err=>console.log(err));
}
render(){
返回(
{
this.state.posts.map((post,index)=>{
返回(
);
})
}
);
}
}
getPosts() {
axios.get("/posts").then(res => {
this.setState({
posts: res.data
})
}).catch(err => console.log(err));
}
render() {
return (
<div className="blog-container">
{
this.state.posts.map((post, index) => {
return(
<Post
key={post._id}
id={post._id}
title={post.title}
content={post.content}
date={post.date}
comments={post.comments}
/>
);
})
}
</div>
);
}
}