Question

我正在使用 react-google-login （https://www.npmjs.com/package/react-google-login）工具登录，以为我的应用程序提供Google登录功能。按照页面上的手册，我最终使用了以下代码。

<GoogleLogin
   clientId="xxx.apps.googleusercontent.com"
   onSuccess={this.responseGoogle.bind(this)}
   onFailure={this.responseGoogle.bind(this)}
   tag={'span'}
   className={"google-button-wrapper"}
   >
   <Button id={'google-button'} basic
      color='google plus'>
      <Icon name='google plus'/>
      Google Plus
   </Button>
</GoogleLogin>

问题在于，即使不单击按钮也将触发登录操作。刷新页面后会发生这种情况。

我发现了以下可疑情况：

刷新页面->打开登录页面=已触发

刷新页面->打开登录页面->打开其他站点->再次登录=第一次触发，第二次没有触发。

刷新页面->打开登录页面->打开注册页面=在登录页面上触发，即使有相同的代码片段，也不会在注册页面上触发。

我正在使用React v ^ 16.3.2，有什么想法吗？

Answer 1

尝试在onSuccess和onFailure内使用箭头函数，不要在此处绑定它们。最好在构造函数上绑定函数

Answer 2

我希望这能解决您的问题


import { GoogleLogin, GoogleLogout } from 'react-google-login';


const CLIENT_ID = '<client_id>';


class GoogleBtn extends Component {
   constructor(props) {
    super(props);

    this.state = {
      isLogined: false,
      accessToken: ''
    };

    this.login = this.login.bind(this);
    this.handleLoginFailure = this.handleLoginFailure.bind(this);
    this.logout = this.logout.bind(this);
    this.handleLogoutFailure = this.handleLogoutFailure.bind(this);
  }

  login (response) {
    if(response.accessToken){
      this.setState(state => ({
        isLogined: true,
        accessToken: response.accessToken
      }));
    }
  }

  logout (response) {
    this.setState(state => ({
      isLogined: false,
      accessToken: ''
    }));
  }

  handleLoginFailure (response) {
    alert('Failed to log in')
  }

  handleLogoutFailure (response) {
    alert('Failed to log out')
  }

  render() {
    return (
    <div>
      { this.state.isLogined ?
        <GoogleLogout
          clientId={ CLIENT_ID }
          buttonText='Logout'
          onLogoutSuccess={ this.logout }
          onFailure={ this.handleLogoutFailure }
          render={renderProps => (
            <Button onClick={renderProps.onClick} size="small">Logout</Button>)}
        />
           : <GoogleLogin
          clientId={ CLIENT_ID }
          buttonText='Login'
          onSuccess={ this.login }
          onFailure={ this.handleLoginFailure }
          cookiePolicy={ 'single_host_origin' }
          responseType='code,token'
          render={renderProps => (
            <Button onClick={renderProps.onClick}size="small">Login</Button>)}
        />
      }
      

    </div>
    )
  }
}

export default GoogleBtn;

反应Google登录

2 个答案: