javascript - react : Loading gapi and currentUser on page load

Question

如果用户登录或未登录，我正在尝试在页面加载时设置重定向。

我初始化gapi的HTML文件:

    <script src="https://apis.google.com/js/client:platform.js?onload=start" async defer></script>
        <script>
            function start() {
                console.log('script running')
                gapi.load('auth2', function() {
                    auth2 = gapi.auth2.init({
                        client_id: '817677528939-dss5sreclldv1inb26tb3tueac98d24r.apps.googleusercontent.com',
                        scope: 'profile email'
                    });
                });
            }
        </script> 

用户在 Login.js 上登录

/* global gapi */

import React from 'react';

import { Redirect } from 'react-router';
import AppBar from 'material-ui/AppBar';
import $ from 'jquery'


class Login extends React.Component{
    constructor(props) {
        super(props)
        this.handleSignIn = this.handleSignIn.bind(this)
        this.signInCallback = this.signInCallback.bind(this)
    }

    handleSignIn() {
        console.log(gapi.auth2)
        var x = gapi.auth2.getAuthInstance().grantOfflineAccess()
        console.log(x)
    }

    render() {
        return(
            <div>
                <AppBar className='appBar' title="Pliny" showMenuIconButton={false} zDepth={2} />
                <button  id="signinButton" onClick={this.handleSignIn} >Sign in with Google</button>

            </div>
        )
    }
}

class SignIn2 extends React.Component{

    constructor(props){
        super(props);
        this.updateRedirect = this.updateRedirect.bind(this)
        this.state = {
            redirect: false,
            loaded: false
        }
    }

    updateRedirect() {
        this.setState({
            redirect: true
        })
    }

    componentDidMount() {
        gapi.load('auth2', () => {
            gapi.auth2.init({
                client_id: '817677528939-dss5sreclldv1inb26tb3tueac98d24r'
            }).then((auth2) => {
                console.log( "signed in: " + auth2.isSignedIn.get())
                this.setState({
                    redirect: auth2.isSignedIn.get(),
                    loaded: true
                }, () => {console.log('this finished')})
            })
        })
    }

    render() {
        if (!this.state.loaded){
            console.log(this.state.loaded)
            return null
        }

        console.log(this.state.loaded)
        return (
            this.state.redirect ?
            <Redirect to='/options' /> : <Login updateRedirect = {this.updateRedirect} />
        )
    }    
}

export default SignIn2

我有一个重定向设置来处理登录(这里没有问题)。

但是，我现在在 /options 页面上遇到问题。

选项.js

    componentDidMount() {    
        gapi.load('auth2', () => {
            var googleAuth = gapi.auth2.getAuthInstance()
            console.log(googleAuth)
        })

当页面最初重定向时，googleAuth 会打印出一个值

jF {zd:{…}，aea:“single_host_origin”，Ofa:true，d2:true，Z1:未定义，…}

但是，当我刷新页面时，它现在打印为 null。

为什么？

其次，我有一个打印间隙信息的按钮:

checkUserData() {
    var googleAuth = gapi.auth2.getAuthInstance()
    console.log( "signed in: " + googleAuth.isSignedIn.get())
    var user = googleAuth.currentUser.get()
    console.log(user)
}

当我按下运行 checkUserData() 的按钮时，它会打印出我期望的用户数据。

那么为什么当我刷新页面时componentDidMount打印出null呢？我仍然处于登录状态，并且可以通过按钮访问用户数据。

Answer 1

您在 index.html 文件中添加了大量 JavaScript 逻辑，这可能会让您感到困惑，因为您必须在 index.html 与 Options.js 和 Login.js 之间来回切换。

考虑以下内容，对于您的 index.html ，仅将其放在那里:

<script src="https://apis.google.com/js/api.js"></script>

完成，关闭该文件，不再引用它。

接下来，对于一个或多个 JS 文件，您需要如下所示的内容:

import React from "react";

class someClassComponentYouDecideOn extends React.Component {
  componentDidMount() {
    window.gapi.load("client:auth2", () => {
      window.gapi.client.init({
        clientId:
          "1234567890-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com",
        scope: "email"
      });
    });
  }

现在，通过在 Chrome 控制台中练习登录和退出，确保上述内容适合您。

控制台中的 gapi.auth2.getAuthInstance() 将为您提供 auth 对象属性，您将看到 signIn 和 signOut 作为它拥有的众多属性中的两个，您可以通过以下方式进行练习:

gapi.auth2.getAuthInstance().signIn() 和 gapi.auth2.getAuthInstance().signOut() 。

当然，要在浏览器上查看结果，您可能需要创建一个带有 if 条件的辅助函数，您可以将其渲染到浏览器，如下所示:

renderAuthButton() {
    if (this.state.isSignedIn === null) {
      return <div>I dont know if I am signed in</div>;
    } else if (this.state.isSignedIn) {
      return <div>I am signed in!</div>;
    } else {
      return <div>I am not signed in</div>;
    }
  }

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

那个isSignedIn不是虚构的，它也是auth库中gapi对象的属性之一。

一旦你验证了这一点，那么你就可以像这样处理 Promise:

import React from "react";

class someClassComponentYouDecideOn extends React.Component {
  componentDidMount() {
    window.gapi.load("client:auth2", () => {
      window.gapi.client.init({
        clientId:
          "1234567890-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com",
        scope: "email"
      })
      .then(() => {
        this.auth = window.gapi.auth2.getAuthInstance();
        this.setState({ isSignedIn: this.auth.isSignedIn.get() });
      });
    });
  }