Javascript 无法读取属性';风格';空-谷歌登录按钮
我正在尝试为我的网站实现谷歌登录。“登录”按钮将正确显示,并在开始时为用户登录。我的问题发生在我使用网站后注销并尝试移动到登录页面时(我使用的是React,所以它都是一个页面)。我使用完全相同的函数来呈现登录页面,但它给了我一个“cb=gapi.loaded_0:249 Uncaught TypeError:无法读取null的属性'style'。gapi中的错误发生在这里(至少我认为): 这是我最初添加要呈现的登录按钮的方式:Javascript 无法读取属性';风格';空-谷歌登录按钮,javascript,reactjs,google-signin,google-api-js-client,Javascript,Reactjs,Google Signin,Google Api Js Client,我正在尝试为我的网站实现谷歌登录。“登录”按钮将正确显示,并在开始时为用户登录。我的问题发生在我使用网站后注销并尝试移动到登录页面时(我使用的是React,所以它都是一个页面)。我使用完全相同的函数来呈现登录页面,但它给了我一个“cb=gapi.loaded_0:249 Uncaught TypeError:无法读取null的属性'style'。gapi中的错误发生在这里(至少我认为): 这是我最初添加要呈现的登录按钮的方式: elements.push(h('div.g-signin2',{'
elements.push(h('div.g-signin2',{'data-onsuccess': 'onSignIn'}))
return h('div.page_content',elements)
稍后我将使用ReactDOM.render调用来渲染它
以下是我如何处理注销和登录:
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
// console.log('User signed out.');
signedin = false;
auth2 = null;
renderPage()
});
}
var google_idtoken;
var signedin = false;
// set auth2 to null to indicate that google api hasn't been loaded yet
var auth2 = null;
function onSignIn(googleUser) {
auth2 = gapi.auth2.getAuthInstance({
client_id: 'ClientID.apps.googleusercontent.com'
});
google_idtoken = googleUser.getAuthResponse().id_token;
wrongemail = true;
// if(auth2 != null && auth2.isSignedIn.get() == true){
if ((((auth2.currentUser.get()).getBasicProfile()).getEmail()).split("@").pop() == 'domain.com'){
signedin = true
wrongemail = false
}
updateSources()
// renderPage()
}
我也遇到过类似的问题,但我不确定这是否与你的问题有关。我在html中添加了如下按钮:
<div id="gdbtn" class="g-signin2" data-onsuccess="onSignIn"></div>
我遇到了与您相同的错误:“UncaughtTypeError:无法读取null的属性'style'。我的问题是,当我取出这些属性并添加按钮时,我就包含了属性:class=“g-signn2”data onsuccess=“onSignIn”:
<div id="gdbtn"></div>
然后错误消失了。看起来和你的问题很相似。您可以尝试通过onload函数添加按钮。只是一个想法。您可以在以下位置查看文档:这是gapi问题,请检查 与angular2相同,相关源代码:
我通过为每个登录按钮提供不同的id解决了这个问题。例如,您的注册页面和登录页面上可能有“登录”按钮。为按钮的每个实例指定自己的id。这不是错误发生的地方。必须有一个
元素。style
在代码中的某个地方,其中一些元素的计算结果为null
。在任何情况下,控制台中都必须有脚本文件名和行号,并带有指示错误发生位置的错误。
<script src="https://apis.google.com/js/platform.js?onload=renderGDriveButton"></script>
function renderGDriveButton() {
gapi.signin2.render('gdbtn', {
'height': 50
});
}
<div id="gdbtn"></div>
<app>Loading...</app>
<script>
gapi.load('auth2', function() {
// Retrieve the singleton for the GoogleAuth library and set up the client.
auth2 = gapi.auth2.init({
client_id: 'YOURCLIENT_ID.apps.googleusercontent.com'
});
});
</script>
import { Component, ElementRef, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '../../services/auth.service';
declare var auth2: any;
@Component({
selector: 'login',
template: require('./login.component.html'),
styles: [require('./login.component.css')]
})
export class LoginComponent {
@ViewChild('googleButton') el: ElementRef;
constructor(private router:Router, private authService: AuthService) { }
ngAfterViewInit() {
let self = this;
if (this.authService.isLoggedIn) {
self.router.navigate(['home']);
}
auth2.attachClickHandler(self.el.nativeElement, {}, (googleUser) => {
var token = googleUser.getAuthResponse().id_token;
self.authService.login(token);
self.router.navigate(['home']);
});
};
}