ionic2：如何在sidemenu的应用程序中管理用户状态？ [英] ionic2: how to manage user state in our app in sidemenu?
问题描述
我使用mongoDB作为我的支持，
firebase.auth（）。onAuthStateChanges（）方法侦听身份验证状态在我们的应用程序中更改的时间。这真的很酷。
但是同样的事情没有发生在我的情况下，因为不是类似的支持我使用。
我将在下面分享我的代码之前，我会告诉你我想通过app.component.ts中的构造函数获取用户。当用户成功登录到我的应用程序，我得到的唯一令牌，我存储在ionicStorage的用户。同时我在app.component.ts的构造函数中调用了一个服务来从本地存储中获取用户。它正在工作但是，我的app.component不会触发用户注册时？我需要手动重新加载页面一次然后出根组件触发，服务调用，获取用户显示在sidemenu数据？
我不想重新加载我的页面显示
// app.component.ts
export class MyApp {
构造函数（getDataService：GetDataService
，公共存储：存储）{
（userResp => {
this.user = userResp;
console.log（'注册用户：'+ JSON.stringify（userResp））;
}）;
$ b））}
// app .html
< ion-content>
< div * ngIf =userpadding>
Hi {{user.displayName}}
< / div>< / ion-content>
谢谢，
但是我的app.component不会在用户注册时触发？
手动重新加载页面一次，然后出根组件触发，
服务调用，获取用户显示在sidemenu数据？
是的，您需要告诉应用程序组件数据已经改变。但是，您可以使用事件来执行此操作。因此，在您的身份验证服务中，您可以在用户登录或注销时发布一些事件：
从离子导入{Events} -angular';
// ...
@Injectable（）
导出类AccountService {
构造函数（...，public events：Events）{}
public login（）：任何{
//你的逻辑...
//发布`user：login`事件，发送true
this.events.publish（'user：login'，true）;
$ b public logout（）：any {
//你的逻辑...
//发布`user：login`事件，发送false
this.events.publish（'user：login'，false）;
$ b $ / code> 然后在你的app.component文件，订阅这些事件来处理每个场景：
export class MyApp {
构造函数（getDataService：GetDataService，public storage：Storage，public events：Events）{
$ b $ this.storage.get（'user'）。then（userResp => {
this。 user = userResp;
console.log（'注册用户：'+ JSON.stringify（userResp））;
}）;
events.subscribe（'user：login'，（loggedIn）=> {
if（loggedIn）{
//获取用户详细信息
this.storage.get（'user'）。then（userResp => {
this.user = userResp;
console.log（'注册用户：'+ JSON .stringify（userResp））;
}）;
} else {
//重置侧边菜单
this中显示的用户详细信息。 user = null;
}
}）;
$ b code $ pre
i am using mongoDB as my backed,
firebase.auth().onAuthStateChanges() method listens when authentication state changes in our app. thats really Cool.
But same thing not happened in my case because of not similar backed i used.
i will share my code in below before that i will tell you what i trying to get the user via constructor in app.component.ts. when the user successfully Logged in to my app i am getting user with unique token which i am storing in ionicStorage. at the same time i had called a service in the constructor of app.component.ts to get the user from my localstorage. it is working But my app.component is not triggering when user signs up ? i need to manually reload the page once then out root component triggered , service called , getting data of user showing in the sidemenu?
i dont want to reload my page to show the user.
//app.component.ts
export class MyApp {
constructor(getDataService:GetDataService
,public storage: Storage) {
this.storage.get('user').then(userResp => {
this.user = userResp;
console.log('signup user : ' + JSON.stringify(userResp));
});
})}
//app.html
<ion-content>
<div *ngIf="user" padding>
Hi {{user.displayName}}
</div></ion-content>
thanks,
解决方案
But my app.component is not triggering when user signs up? Do I need to
manually reload the page once then out root component triggered,
service called, getting data of user showing in the sidemenu?
Yes, you need to tell the app component that the data has changed. But you can use events to do so. So in your auth service, you can publish some events when the user signs in or out:
import { Events } from 'ionic-angular';
// ...
@Injectable()
export class AccountService {
constructor(..., public events: Events) {}
public login(): any {
// your logic...
// Publish the `user:login` event, sending true
this.events.publish('user:login', true);
}
public logout(): any {
// your logic...
// Publish the `user:login` event, sending false
this.events.publish('user:login', false);
}
}
And then in your app.component file, subscribe to those events to handle each scenario:
export class MyApp {
constructor(getDataService: GetDataService, public storage: Storage, public events: Events) {
this.storage.get('user').then(userResp => {
this.user = userResp;
console.log('signup user : ' + JSON.stringify(userResp));
});
events.subscribe('user:login', (loggedIn) => {
if(loggedIn) {
// Get the user details again
this.storage.get('user').then(userResp => {
this.user = userResp;
console.log('signup user : ' + JSON.stringify(userResp));
});
} else {
// Reset the user details shown in the side menu
this.user = null;
}
});
}
}
这篇关于ionic2：如何在sidemenu的应用程序中管理用户状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
