Question

我正在尝试对我的应用程序实施Google OAuth。单击创建的“使用Google登录”按钮时，将弹出Google登录信息。但是之后，我在Redux devtools中看不到任何更改，并且也无法登录

当我在浏览器的控制台中输入以下代码（例如gapi.auth2.getAuthInstance().signIn()）时，我的代码有效，然后我的按钮将从“通过google登录”更改为“退出”，然后我就登录了。而且我看到了对它可以工作的redux开发工具的更改。但由于某些原因，当单击我的应用程序的按钮时，它将无法正常工作。

GoogLeAuth.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { signIn, signOut } from "./actions/index";

class GoogleAuth extends Component {
  componentDidMount() {
    window.gapi.load("client:auth2", () => {
      window.gapi.client
        .init({
          clientId:
            "ID",
          scope: "email"
        })
        .then(() => {
          this.auth = window.gapi.auth2.getAuthInstance();
          this.onAuthChange(this.auth.isSignedIn.get());
          this.auth.isSignedIn.listen(this.onAuthChange);
        });
    });
  }

  onAuthChange = isSignedIn => {
    if (isSignedIn) {
      this.props.signIn(this.auth.currentUser.get().getId());
    } else {
      this.props.signOut();
    }
  };
  onSignInClick = () => {
    this.auth.signIn();
  };

  onSignOutClick = () => {
    this.auth.signOut();
  };

  authButton = () => {
    if (this.props.isSignedIn === null) {
      return null;
    } else if (this.props.isSignedIn) {
      return <button onClick={this.onSignOutClick}>Sign Out</button>;
    } else {
      return <button onClick={this.onSignInClick}>Sign In with Google</button>;
    }
  };

  render() {
    return <div>{this.authButton()}</div>;
  }
}

const mapStateToProps = state => {
  return { isSignedIn: state.auth.isSignedIn };
};

export default connect(
  mapStateToProps,
  { signIn, signOut }
)(GoogleAuth);

Answer 1

您还需要在signIn中调用onSignInClick操作：

onSignInClick = () => {
    this.auth.signIn();
    this.props.signIn();
};

与signOut中的onSignOutClick相同。

使用Google Auth登录来响应Redux问题

1 个答案: