我想在我的react/react-router/flux'/dashboard'应用程序中构建一个 Facebook 登录。我在登录事件上注册了一个监听器,如果用户已登录,我想将用户重定向到。我该怎么做?location.push效果不太好,除非完全重新加载页面。
'/dashboard'
location.push
在 React 应用程序中实现 Facebook 登录,并在用户登录后重定向到 /dashboard 页面,您可以使用以下步骤:
/dashboard
安装 Facebook SDK:首先,在您的应用程序中安装 Facebook SDK,以便您可以使用其提供的登录功能。您可以使用 npm 或 yarn 安装 Facebook SDK,然后将其添加到您的项目中。
在 componentDidMount 中初始化 SDK:在您的应用程序中的 componentDidMount 生命周期方法中初始化 Facebook SDK。您可以使用 Facebook SDK 提供的初始化方法,并在初始化完成后执行其他操作。
实现登录功能:使用 Facebook SDK 提供的方法实现登录功能。当用户点击登录按钮时,调用 Facebook SDK 的登录方法,并处理登录成功或失败的情况。
处理登录成功:在登录成功后,您可以将用户重定向到 /dashboard 页面。您可以使用 React Router 的 history 对象来执行编程式导航,而不是使用 location.push。
history
示例代码:下面是一个简单的示例代码,展示了如何使用 React、React Router 和 Facebook SDK 实现上述功能:
import React, { Component } from 'react'; import { withRouter } from 'react-router-dom'; import FacebookLogin from 'react-facebook-login'; class Login extends Component { constructor(props) { super(props); this.state = { isLoggedIn: false, userId: '', name: '', email: '' }; } responseFacebook = (response) => { console.log(response); if (response.status !== 'unknown') { // User logged in successfully this.setState({ isLoggedIn: true, userId: response.userID, name: response.name, email: response.email }); // Redirect to dashboard page this.props.history.push('/dashboard'); } else { // User cancelled login or login failed this.setState({ isLoggedIn: false }); } } render() { let fbContent; if (this.state.isLoggedIn) { fbContent = ( <div> <h2>Welcome {this.state.name}</h2> Email: {this.state.email} </div> ); } else { fbContent = ( <FacebookLogin appId="YOUR_FACEBOOK_APP_ID" autoLoad={false} fields="name,email" callback={this.responseFacebook} /> ); } return ( <div> {fbContent} </div> ); } } export default withRouter(Login);
请确保将 YOUR_FACEBOOK_APP_ID 替换为您在 Facebook 开发者门户中创建的应用程序的实际应用程序 ID。
YOUR_FACEBOOK_APP_ID
通过使用上述步骤,您应该能够在 React 应用程序中实现 Facebook 登录,并在用户登录后重定向到 /dashboard 页面,而无需完全重新加载页面。