google 登录 ionic 后显示用户数据
Displaying user daya after google login ionic
制作此应用几个小时后,我无法登录google,我之前已经问过问题但仍然卡住了。
所以我有 logic.service.ts 处理用户登录并将他们的数据存储在 localStorage
login(){
this.googlePlus.login({
'webClientId' : '927898787134-spvfdmvm9apq0e1fo2efvvura8vqpid8.apps.googleusercontent.com',
'offile' : true
}).then(res=>{
firebase.auth().signInWithCredential(firebase.auth.GoogleAuthProvider.credential(res.idToken))
.then(suc=>{
// console.log('users', JSON.stringify(suc));
this.storage.set('user', JSON.stringify(suc));
this.router.navigate(["/tabs/home"]);
}).catch(ns=>{
alert('Unsucessful');
})
})
}
然后我尝试获取用户数据并将其显示在其他页面上,但我卡住了,因为我没有得到我需要的东西。在我的 home.page.ts
userData:any;
loginDetails:any;
subscribe: any;
user:any={};
public items: any;
constructor(
private iab: InAppBrowser,
private router: Router,
public platform: Platform,
private service: LogicService,
private nativeStorage: NativeStorage
) {
this.subscribe = this.platform.backButton.subscribeWithPriority(666666, () => {
if (this.constructor.name === 'HomePage') {
if (window.confirm('Do you want to exit the app?')) {
(navigator as any).app.exitApp();
}
}
});
let userData = JSON.parse(localStorage.getItem('user'));
console.log(userData.user);
console.log(userData.user.displayName);
console.log(userData.user.email);
console.log(userData.user.photoURL);
}
go() {
this.router.navigateByUrl('tabs/login');
}
ngOnInit(){
this.service.getLocalData().subscribe(
data => {this.items = data});
}
webview(url){
this.iab.create(url, '_self', 'location=no,toolbar=no,zoom=no');
}
我调用数据并将其解析为对象,当我调用 console.log(user) 时它向我显示了这个
但是当我尝试调用 user.displayName 时它说未定义
更新我的代码后,我可以记录我的数据,但我正试图像这样在 html 上显示它
<div class="header">
<h3 style="font-weight: bold;">{{ userData.user.displayName }}</h3>
<p style="color:grey;font-weight:bold;">Get closer with us!</p>
</div>
但现在我收到这样的错误
您访问的对象不正确,请改用:
let userData = JSON.parse(localStorage.getItem('user'));
console.log(userData.user.displayName);
此外,如评论中所述,您需要将 userData
定义为 class 级别,以便它在您的模板中可见(确保您没有在构造函数中将其重新定义为然后它将隐藏class级变量)。
制作此应用几个小时后,我无法登录google,我之前已经问过问题但仍然卡住了。
所以我有 logic.service.ts 处理用户登录并将他们的数据存储在 localStorage
login(){
this.googlePlus.login({
'webClientId' : '927898787134-spvfdmvm9apq0e1fo2efvvura8vqpid8.apps.googleusercontent.com',
'offile' : true
}).then(res=>{
firebase.auth().signInWithCredential(firebase.auth.GoogleAuthProvider.credential(res.idToken))
.then(suc=>{
// console.log('users', JSON.stringify(suc));
this.storage.set('user', JSON.stringify(suc));
this.router.navigate(["/tabs/home"]);
}).catch(ns=>{
alert('Unsucessful');
})
})
}
然后我尝试获取用户数据并将其显示在其他页面上,但我卡住了,因为我没有得到我需要的东西。在我的 home.page.ts
userData:any;
loginDetails:any;
subscribe: any;
user:any={};
public items: any;
constructor(
private iab: InAppBrowser,
private router: Router,
public platform: Platform,
private service: LogicService,
private nativeStorage: NativeStorage
) {
this.subscribe = this.platform.backButton.subscribeWithPriority(666666, () => {
if (this.constructor.name === 'HomePage') {
if (window.confirm('Do you want to exit the app?')) {
(navigator as any).app.exitApp();
}
}
});
let userData = JSON.parse(localStorage.getItem('user'));
console.log(userData.user);
console.log(userData.user.displayName);
console.log(userData.user.email);
console.log(userData.user.photoURL);
}
go() {
this.router.navigateByUrl('tabs/login');
}
ngOnInit(){
this.service.getLocalData().subscribe(
data => {this.items = data});
}
webview(url){
this.iab.create(url, '_self', 'location=no,toolbar=no,zoom=no');
}
我调用数据并将其解析为对象,当我调用 console.log(user) 时它向我显示了这个
但是当我尝试调用 user.displayName 时它说未定义
更新我的代码后,我可以记录我的数据,但我正试图像这样在 html 上显示它
<div class="header">
<h3 style="font-weight: bold;">{{ userData.user.displayName }}</h3>
<p style="color:grey;font-weight:bold;">Get closer with us!</p>
</div>
但现在我收到这样的错误
您访问的对象不正确,请改用:
let userData = JSON.parse(localStorage.getItem('user'));
console.log(userData.user.displayName);
此外,如评论中所述,您需要将 userData
定义为 class 级别,以便它在您的模板中可见(确保您没有在构造函数中将其重新定义为然后它将隐藏class级变量)。