javascript - 如何使用 Facebook Login 和 ReactJS 实现登录和注销？

Question

我正在尝试使用 Facebook Login 让用户使用 React 和 React-Router 登录和退出我的网络应用程序。我制作了一个在成功登录后重定向用户的组件，但我无法在新 View 上呈现注销按钮。我也是 React-Router 的新手，所以我不完全确定问题是否出在我的路由上。

这是我到目前为止的代码:

登录.js

class Login extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            loggedStatus: false,
            id : ''
        }
    }

    componentDidMount() {
        window.fbAsyncInit = function() {
            window.FB.init({
                appId      : '',
                cookie     : true,  
                xfbml      : true,
                version    : 'v2.11'
            });

            window.FB.getLoginStatus(function(response) {
                this.statusChangeCallback(response);
            }.bind(this));
        }.bind(this);

        (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11&appId=''";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'))
    }

    loggedIn(response) {
        this.setState({
            loggedStatus : true,
            id: response.authResponse.userID        
        });         
    }

    loggedOut() {
        this.setState({
            loggedStatus: false,
        })
    }

    statusChangeCallback(response) {
      console.log('statusChangeCallback');
      console.log(response);
      if (response.status === 'connected') {
        this.loggedIn(response)
        console.log(this.state);
      } else if (response.status === 'not_authorized') {
        this.loggedOut()
        console.log(this.state.loggedStatus);
      } else {
        this.loggedOut()
         console.log(this.state.loggedStatus);
      }
    }

    checkLoginState() {
      window.FB.getLoginStatus(function(response) {
        this.statusChangeCallback(response);
      }.bind(this));
    }

    handleClick() {
      window.FB.login(this.checkLoginState());
    }

    render () {
        if (!this.state.loggedStatus) {
        return (
            <div className="fb-login-button" 
                 data-max-rows="1" 
                 data-size="large" 
                 data-button-type="continue_with" 
                 data-show-faces="false" 
                 data-auto-logout-link="true" 
                 data-use-continue-as="true">
            </div>   );
        } else {
            return (
                <Redirect to = {{
                    pathname : '/loggedin',
                    state : {
                        id: this.state.id
                    }
                }} />
            )
        }
    }

}

export default Login;

登录.js

class UserLogin extends React.Component {
    constructor(props) {
        super(props);
        this.state =  {
            id: this.props.location.state.id
        }
    }
   render(){
      return (
    <div>Hey {this.state.id}!</div>
    </div>)

    }
}

export default UserLogin

这是我的主要应用程序，App.js

class App extends React.Component {
   render() {
      return (
        <Router>
            <Switch path = '/'>
                <Route path = '/login' component = {Login} />
                <Route path = '/loggedin' component = {UserLogin} />
            </Switch>
        </Router>
     );
   }
};

export default App;

Answer 1

那么我猜你的路由器设置有问题。

//Solution suppose you are using creat-react-app
//At index.js of you app put this.
//other import.

//install history package from npm

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();


ReactDOM.render(
       <Router history ={history}>
            <App/>
        </Router>,   
 document.getElementById('root'));
registerServiceWorker();

//at app.js file
//other required import
import { BrowserRouter, Route } from "react-router-dom";

//import your two component here



class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Route exact path="/login" component={Login} />
          <Route exact path="/loggedin" component={Loggedin} />
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

// Inside Login component
// Use componentDidMount life cycle hook to redirect.


componentDidMount(){
  //other logic and at last...
  if(this.state.id !== null){
  const {history} = this.props;
  history.push('/loggedin') //redirection link if user is already logged in.
  }
  
}