Question

很抱歉，以前是否曾问过这个问题，我们已经研究并观看了一些教程，但似乎没有一个人能消除我们对如何在客户端上处理用户的疑问。< / p>

我们正在尝试通过从React / Redux应用程序触发流来在Node.js上使用通行证对Facebook（或任何其他策略提供者）进行身份验证，我想允许用户登录后访问某些组件内。

我们的流程正在按预期的方式进行。

我们从8080端口启动快速后端，使用cookie-session初始化护照：

    const app = express();
    // Use JSON for req.body
    app.use(bodyParser.json());
    // Set up cookies for passport logged in sessions
    app.use(cookieSession(settings.cookies));
    // Initialize passport
    app.use(passport.initialize());
    app.use(passport.session()); // Calls serializeUser & deserializeUser
    // Share static files
    app.use(express.static(path.join(__dirname, '../build')));
    // Register  routes
    app.use('/auth', authRouter);

用户单击我们其中一个组件上的“登录”按钮，该按钮指向 / auth / facebook API

            render() {
        return (<div className="container">
            <h3>You need to be logged in to see this</h3>
            {/*Using a fetch onClick does not work because of CORS, use <a> */}
            <a href="https://localhost:8080/auth/facebook">
                <button >LOGIN WITH FACEBOOK</button>
            </a>
            </div>)}

我们的快速应用程序在'auth'上公开护照流的路线：

    /** authRouter **/
router.get('/facebook', passport.authenticate('facebook', { scope: ['email'] }));

//Facebook will redirect the user to this URL after approval.  
router.get('/facebook/callback', passport.authenticate('facebook'), (req, res) => {
    res.redirect('/dashboard');
});

弹出一个显示Facebook登录名的窗口，该用户被重定向到 / facebook / callback 端点。

此时，前端已正确定向到仪表板组件。我们可以在开发者控制台中看到设置了auth的cookie。但是我们不知道如何访问后端req.user中的用户信息。

我们想在显示其他使用此数据的组件之前访问用户信息。入口点app.js使用React路由，例如：

  render() {
    return (
      < BrowserRouter >
        <div className='App'>
          <Layout title={'Passport Demo'}>
            <Route exact path='/' render={() => { return (<h1>This would be home</h1>) }} />
            {/* Hide other components unless logged in */}
            {this.state.isLoggedIn ?
              <div>
                <Route path='/dashboard' component={Home} />
                <Route path='/explore' component={Explore} />
              </div> : <Login />
            }
          </Layout>
        </div>
      </BrowserRouter >
    );
  }

从Facebook成功重定向后，如何设置isLoggedIn和用户数据状态？-理想情况下，使用redux动作和reducer。

我们如何将用户数据从后端传递到前端？

如果解决方案是仅仅为了获取数据而创建新路由 / users ，我仍然需要访问userID /令牌才能使用fetch或axios进行请求，这是如何完成的？。

谢谢。

Answer 1

我一直面临着同样的问题。我现在有解决方案。让您的前端位于localhost:3000中，后端位于localhost:9000中您已将facebook的回调URL设置为localhost：9000 / facebook / callback，对吧？

您需要将其更改为localhost:3000/login/social（仅作为示例，您需要将回调URL更改为前端路由）。因此，此路由将获得用户详细信息，就像您在后端（localhost:9000/facebook/callback）中收到的一样。现在，从localhost:3000/login/social中获取对包含您从Facebook接收到的用户详细信息的后端URL（即localhost:9000/facebook/callback）的发布请求。

现在，res.send（token）无需从后端重定向，因此您可以在前端接收令牌。然后重定向

在node.js后端上带有react-redux的facebook-passport

1 个答案: