ionic2:如何在侧边菜单中管理我们应用程序中的用户状态?
ionic2: how to manage user state in our app in sidemenu?
我正在使用 mongoDB 作为我的支持,
firebase.auth().onAuthStateChanges() 方法在我们的应用程序中的身份验证状态发生变化时进行侦听。那真的很酷。
但我的情况没有发生同样的事情,因为我使用的不是类似的支持。
我会在下面分享我的代码,然后我会告诉你我试图通过 app.component.ts 中的构造函数获取用户。当用户成功登录到我的应用程序时,我将获得我存储在 ionicStorage 中的唯一令牌的用户。同时,我在 app.component.ts 的构造函数中调用了一项服务,以从我的本地存储中获取用户。它正在工作但是我的 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>
谢谢,
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?
是的,您需要告诉应用程序组件数据已更改。但是您可以使用 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;
}
});
}
}
我正在使用 mongoDB 作为我的支持,
firebase.auth().onAuthStateChanges() 方法在我们的应用程序中的身份验证状态发生变化时进行侦听。那真的很酷。
但我的情况没有发生同样的事情,因为我使用的不是类似的支持。
我会在下面分享我的代码,然后我会告诉你我试图通过 app.component.ts 中的构造函数获取用户。当用户成功登录到我的应用程序时,我将获得我存储在 ionicStorage 中的唯一令牌的用户。同时,我在 app.component.ts 的构造函数中调用了一项服务,以从我的本地存储中获取用户。它正在工作但是我的 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>
谢谢,
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?
是的,您需要告诉应用程序组件数据已更改。但是您可以使用 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;
}
});
}
}