我正在 React 页面中使用 Google 创建基本身份验证。
刷新页面后出现错误无法读取未定义的属性(读取“帐户”)
但是启动页面并在多次刷新页面并清除控制台后,错误消失了
再次出现错误。
这是使用谷歌身份验证的正确脚本吗?因为使用这个后我得到了一个错误,但是google没有定义但是我必须在App.js页面中定义google。
请让我知道实际错误在哪里。我认为错误位于index.html中的script下。
index.html
<script src="https://accounts.google.com/gsi/client" async defer></script>
App.js
import './App.css';
import { useEffect, useState } from 'react';
import jwt_decode from "jwt-decode";
const google = window.google;
function App() {
const [ user, setUser ] = useState({});
function handleCallbackResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
var userObject = jwt_decode(response.credential);
console.log(userObject);
setUser(userObject);
document.getElementById("signInDiv").hidden = true;
}
function handleSignOut(event) {
setUser({});
document.getElementById("signInDiv").hidden = false;
}
useEffect(() => {
// google from script in index.html
google.accounts.id.initialize({
client_id: "xxx",
callback: handleCallbackResponse
});
google.accounts.id.renderButton(
document.getElementById("signInDiv"),
{ theme: "outline", size: "large" }
);
google.accounts.id.prompt();
}, []);
// If there is signed in user then show sign out button
// If there is no user then show sign in button
return (
<div className="App">
<div id="signInDiv"></div>
{
Object.keys(user).length != 0 &&
<button onClick={(e) => handleSignOut(e)}>Sign Out</button>
}
{ user &&
<div>
<img src={user.picture} alt="" />
<h3>{user.name}</h3>
</div>
}
</div>
);
}
export default App;
问题是您正在加载 SDK 的
async defer
标签上有 <script />
。这基本上意味着代码并不重要,浏览器可以根据需要加载您的代码。当您重新加载页面时,SDK
有可能在useEffect
运行之前运行,在这种情况下它将起作用。如果 useEffect
首先运行,那么 google
将是 undefined
。您应该查看 SDK 文档,看看他们是否有某种机制告诉您何时完全加载并准备就绪(例如他们可能会调度一个事件或其他内容)。否则,您可以从 async defer
中删除 script
,尽管我不推荐这样做