ionic2:如何在sidemenu中管理用户状态?

时间:2017-05-27 07:18:49

标签: angular typescript firebase ionic2 ionic3

我使用mongoDB作为我的支持,

firebase.auth()。onAuthStateChanges()方法在我们的应用程序中验证状态更改时进行侦听。那太酷了。

但同样的事情并没有发生在我的情况下,因为我使用了不相似的支持。

我将在下面分享我的代码之前我将告诉你我试图通过app.component.ts中的构造函数获取用户的内容。当用户成功登录到我的应用程序时,我将获得具有唯一令牌的用户,我将其存储在ionicStorage中。同时我在app.component.ts的构造函数中调用了一个服务来从我的localstorage中获取用户。它正在工作但是我的app.component在用户注册时没有触发?我需要手动重新加载页面,然后输出根组件,调用服务,获取用户在侧边菜单中显示的数据?

我不想重新加载我的页面以显示用户。

  

// 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>

感谢,

1 个答案:

答案 0 :(得分:1)

  

但是我的app.component在用户注册时没有触发?我需要吗?   手动重新加载页面然后输出根组件,   调用服务,获取用户在侧边菜单中显示的数据?

是的,您需要告诉应用程序组件数据已更改。但您可以使用events来执行此操作。因此,在您的身份验证服务中,您可以在用户登录或注销时发布一些事件:

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);

  }

}

然后在您的app.component文件中,订阅这些事件以处理每个场景:

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;

      }
    });

  }

}