无法解构'response.profileObj'的属性'name'，因为它未定义

const navigate = useNavigate();
const responseGoogle = (response) => {
localStorage.setItem('user', JSON.stringify(response.profileObj));
const { name, googleId, imageUrl } = response.profileObj;
const doc = {
_id: googleId,
_type: 'user',
userName: name,
image: imageUrl,
};
client.createIfNotExists(doc).then(() => {
navigate('/', { replace: true });
});
};

报错"name is undefined"——可是怎么做到的呢?imageUrl和googleId工作正常，那么name有什么问题?

我猜你和我一样在ShareMe项目上工作(https://www.youtube.com/watch?v=XxXyfkrP298&t=3800s)。

Thing is login被更新了，现在Google的服务在他们的响应中返回了一组不同的参数，而不是以前录制视频时返回的参数。

您要查找的参数，如"name"one_answers";id"现在在响应中找到。凭证，但它是编码的(出于安全原因)，现在您必须解码它。你必须在"shareme_frontend"文件夹下安装"jwt-decode"，并加上"npm i jwt-decode"。()，您将能够使用"var decodedHeader = jwt_decode(response.credential);"要解码它，您应该能够使用属性"名称"子"而不是ID和"图片"，这应该让你加快速度。

您遇到的问题是名称未定义，因为没有response.name，但只有response.credential.name，需要解码。因此，这可能非常令人沮丧，但您将在打印响应时看到这个问题。

来源:

JWT https://www.npmjs.com/package/jwt-decode
'sub'属性。证书:https://developers.google.com/identity/openid-connect/openid-connect

我的例子:

import jwt_decode from "jwt-decode";

const responseGoogle=(response)=>{
localStorage.setItem('user', JSON.stringify(response.profileObj));
var decodedHeader = jwt_decode(response.credential);
console.log(decodedHeader);
const { name, sub, picture } = decodedHeader;
const doc = {
_id: sub,
_type: 'user',
userName: name,
image: picture,
}
client.createIfNotExists(doc)
.then(() =>{
navigate('/', { replace: true })
})
}

这可能是一个符号问题，试试这个:

const navigate = useNavigate();
const responseGoogle = (response) => {
localStorage.setItem('user', JSON.stringify(response.profileObj));
const doc = {
_id: response.profileObj.googleId,
_type: 'user',
userName: response.profileObj.name,
image: response.profileObj.imageUrl,
};
client.createIfNotExists(doc).then(() => {
navigate('/', { replace: true });
});

};

Update: React更新了他们的登录方法，所以你需要搜索最新的google登录方法

尝试添加

npm install gapi-script

然后像这样添加useEffect函数

useEffect(() => {
function start() {
gapi.client.init({
ClientId: process.env.REACT_APP_GOOGLE_API_TOKEN,
scope: '',
})
}
gapi.load('client:auth2', start)})

我遇到同样的问题，同样的问题，这是一个共享项目吗?我想googleId和imageUrl也不行。你可以改变这三个字符的顺序，比如

const {  imageUrl,name, googleId } = response.profileObj;

它会给你错误:cb = gapi.loaded_0 ?le=scs:225未捕获的类型错误:无法解构属性'imageUrl'的'响应。profileObj'未定义

所以，我也被困在这里，寻求帮助!

这个问题已经很长时间了，但是我找到了一个适合我的解决方案，我以这种方式更改了调用

const navigate = useNavigate();
const responseGoogle = (response) => {
localStorage.setItem('user', JSON.stringify(response));
const { clientId, name, imageUrl } = response;
const doc = {
_id: clientId,
_type: 'user',
userName: name,
image: imageUrl,
};
client.createIfNotExists(doc).then(() => {
navigate('/', { replace: true });
});
};

我也改变了google按钮库，使用@react-oauth/google按钮看起来像这样:

<GoogleLogin
onSuccess={responseGoogle}
onError={responseGoogle}/>

我一直在弄清楚这个一段时间，原来有一个不同的方法对于同样的事情。(React不断更新谷歌登录方法，所以需要一个更新的方法)，在响应对象中有一个凭据属性，需要使用jwt_decode对其进行解码函数，它可以从库'jwt-decode导入，在此基础上可以提取进一步的细节。

const responseGoogle = (response) =>{
console.log(response);
var profileObj = jwt_decode(response.credential);
console.log(profileObj);
const doc = {
_id: profileObj.sub,
_type: "user",
userName: profileObj.name,
image: profileObj.picture,
};
client.createIfNotExists(doc)
.then(()=>{
console.log('Login Created')
});

代码应该是这样的:

import jwt_decode from "jwt-decode";    
const responseGoogle = (response) =>{
console.log(response);
var profileObj = jwt_decode(response.credential);
console.log(profileObj);
const doc = {
_id: profileObj.sub,
_type: "user",
userName: profileObj.name,
image: profileObj.picture
};
console.log(doc)
client.createIfNotExists(doc)
.then(()=>{
navigate("/", { replace: true });
console.log('Login Created')
}); 
}

有一个新的更新，我们使用谷歌身份服务SDK检查此链接https://www.npmjs.com/package/@react-oauth/Google .

试着用这段代码登录并获取用户信息。

import React from 'react'
import { GoogleOAuthProvider } from '@react-oauth/google';
import { GoogleLogin, googleLogout } from '@react-oauth/google';
import { useNavigate } from 'react-router-dom';
import {FcGoogle} from 'react-icons/fc' ;
import shareVideo from '../assets/share.mp4' ;
import logo from '../assets/mejlis-logo.png' ;
import {client} from '../client';
import jwt_decode  from "jwt-decode";
//import JWT from 'google-auth-library';
const Login = () => {
const navigate = useNavigate();
const responseGoogle = async(response) => {
localStorage.setItem('user', JSON.stringify(response));
console.log(response);
const decoded = jwt_decode(response.credential)
const { sub, name, picture } = decoded;
const doc = {
_id: sub,
_type: 'user',
userName: name,
image: picture,
};
client.createIfNotExists(doc).then(() => {
navigate('/', { replace: true });
});
};

return (
<div className='flex justify-start items-center flex-col h-screen'>
<div className='relativr w-full h-full'>
<video src ={shareVideo} type ='video/mp4'
loop
controls={false}
muted
autoPlay
className='w-full h-full object-cover' />
</div>
<div className='absolute flex flex-col justify-center items-center top-0 right- left-0 bottom-0 bg-blackOverlay'>
<div className='p=5'>
<img  src={logo} width="130px" alt='logo'/>
</div>
<div className='shadow-2x1'>
<GoogleOAuthProvider
clientId={`${process.env.REACT_APP_GOOGLE_API_TOKEN}`}>
<GoogleLogin
onSuccess={responseGoogle}
onFailure={responseGoogle}
cookiePolicy = 'single_host_origin' />
</GoogleOAuthProvider>
</div>
</div>
</div>
)
}
export default Login

为google创建的问题更新了他们的google登录设置。您可以在安装最新的Google OAuth后尝试此代码:

const navigate = useNavigate();

const responseGoogle = (response) => {
const decoded = jwt_decode(response.credential);
console.log(decoded);

const { name, picture, sub } = decoded;

const user = {
_id: sub,
_type: 'user',
userName: name,
image: picture
};
client.createIfNotExists(user)
.then(()=>{
navigate('/', { replace: true });
});
}

正如许多人在我之前指出的那样，这个错误是由于Google的新响应中的不同结构以及从教程视频中提出的用于Google Login的React库被弃用的事实而发生的。这是解决问题的最新方法:

首先，更新用于Google登录的库。为此，在终端中运行:

npm uninstall react-google-login

然后，安装当前最新的库React OAuth2 | Google。按照npm页面上的步骤(参见前面的链接)安装这个库。在本教程的特殊情况下，步骤如下:

(1)安装新库

npm install @react-oauth/google@latest

(2)用GoogleOAuthProvider包装你的应用。你的App.js文件应该看起来像这样:

import React from "react";
import { Routes, Route, useNavigate } from "react-router-dom";
import { GoogleOAuthProvider } from "@react-oauth/google";
import Login from "./components/Login";
import Home from "./container/Home";
const App = () => {
return (
<GoogleOAuthProvider clientId={process.env.REACT_APP_GOOGLE_API_TOKEN}>
<Routes>
<Route path="login" element={<Login />} />
<Route path="/*" element={<Home />} />
</Routes>
</GoogleOAuthProvider>
);
};
export default App;

(3)更改登录中的代码。JSX文件，以反映所使用的库的变化和响应结构的变化。它看起来应该像这样:

import { GoogleLogin } from "@react-oauth/google";
const responseGoogle = (response) => {
localStorage.setItem("user", JSON.stringify(response.profileObj));
const decodedHeader = jwt_decode(response.credential);

const { name, sub, picture } = decodedHeader;
const doc = {
_id: sub,
_type: "user",
userName: name,
image: picture,
};

client.createIfNotExists(doc).then(() => {
navigate("/", { replace: true });
});
};

对于响应或所使用的库的未来更改，请尝试对Google响应本身进行控制台日志。在我的例子中，错误非常准确地告诉我应该做什么来修复错误。

相关内容

最新更新

热门标签：