小能豆

使用 react-router 登录后自动重定向

javascript

我想在我的react/react-router/flux'/dashboard'应用程序中构建一个 Facebook 登录。我在登录事件上注册了一个监听器,如果用户已登录,我想将用户重定向到。我该怎么做?location.push效果不太好,除非完全重新加载页面。


阅读 46

收藏
2024-06-02

共1个答案

小能豆

在 React 应用程序中实现 Facebook 登录,并在用户登录后重定向到 /dashboard 页面,您可以使用以下步骤:

  1. 安装 Facebook SDK:首先,在您的应用程序中安装 Facebook SDK,以便您可以使用其提供的登录功能。您可以使用 npm 或 yarn 安装 Facebook SDK,然后将其添加到您的项目中。

  2. 在 componentDidMount 中初始化 SDK:在您的应用程序中的 componentDidMount 生命周期方法中初始化 Facebook SDK。您可以使用 Facebook SDK 提供的初始化方法,并在初始化完成后执行其他操作。

  3. 实现登录功能:使用 Facebook SDK 提供的方法实现登录功能。当用户点击登录按钮时,调用 Facebook SDK 的登录方法,并处理登录成功或失败的情况。

  4. 处理登录成功:在登录成功后,您可以将用户重定向到 /dashboard 页面。您可以使用 React Router 的 history 对象来执行编程式导航,而不是使用 location.push

  5. 示例代码:下面是一个简单的示例代码,展示了如何使用 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。

通过使用上述步骤,您应该能够在 React 应用程序中实现 Facebook 登录,并在用户登录后重定向到 /dashboard 页面,而无需完全重新加载页面。

2024-06-02