Reload View after Login (pop)

I have a default home page that checks for a login token, if not it pops in a login page. After login the page pops off and reveals the default page again but it needs to load again with the current user info.
I am firing an event on login that the home page is listening for to reload the data but the view doesn’t change with the new data unless I click a tab and then back.

What would be the best way to do that? I’ve tried all the lifecycle hooks, do I just reload the default page again? If so, how would I do that?

Thanks for any help.

Keith

IMHO this should not be the home page’s problem, and if you architect it that way, your issue should go away. Some other gatekeeper (the app component is a potential choice) should decide whether to make its root page either the home page or the login page. See here for details on how I handle this situation.

1 Like

Thanks for the advice. I will give that all I try.

@rapropos That all makes sense now, the only issue is Home is a tab page and login is a regular page I’m popping on the stack.

I can’t get this part of your code to direct correctly, am I missing something. I’m not sure how to navigate in app.component.

if (authed) {
this.rootPage = AuthedPage;
} else {
this.rootPage = UnauthedPage;
}

Assuming your app.template.html has the typical:

<ion-nav [root]="rootPage">

, then simply assigning to the rootPage property should provide all the navigation needed.

1 Like

Yeah it has that and then in the component it has rootPage = TabsPage;
I did give it to navigate to the login page, but then I can’t see a way to start up the tabs and go back to the 1st default tab.

If you’re following the flow in that post exactly, when setJwt is called, that should happen automatically for you. If you’re picking up just bits of it, you need to call next(true) on whatever subject you’re subscribing to in the app component’s constructor.

1 Like

I’ve just about got your sink working, but I’m getting one error on this:

setJwt(jwt: string): Promise<void> {
this._jwt = jwt;
this._authNotifier.next(!!jwt);
// save it in storage, return resultant promise
}

A function whose declared type is neither ‘void’ nor ‘any’ must return a value.

I’m not sure what to return.

Something like this:

return this._storage.set("authorizationToken", jwt).then(() => {
  // do whatever stuff you need to do internally
});

If you don’t want to store the token in storage, feel free to simply return Promise.resolve(), or change the return type of the function to void. There are times when I want the caller to know that the token has successfully been saved in local storage, and potentially take other actions if it hasn’t / until it does. If that’s not a concern for you, feel free to ignore all of that and just return void.

1 Like

Okay, I finally got it all. That took me way too long, mainly because of my lack of knowledge with RX/JS and a couple other missing pieces I couldn’t figure out.

Thanks for all the help, and yes I did want to store it, just took me a sec.

Not sure if it makes a difference but I put it in the platform function in app.component.ts

constructor(platform: Platform, sink: SinkService) {
platform.ready().then(() => {
  // Okay, so the platform is ready and our plugins are available.
  // Here you can do any higher level native things you might need.
  sink.authenticationNotifier().subscribe((authed) => {
    if (authed) {
      this.rootPage = TabsPage;
    } else {
      this.rootPage = LoginPage;
    }
  });

  StatusBar.styleDefault();
  Splashscreen.hide();
});

}

In SinkService.js

setJwt(jwt: string): Promise<void> {
this._jwt = jwt;
this._authNotifier.next(!!jwt);
// save it in storage, return resultant promise
return this.storage.set('Token');

}

and I had to remove the pop() in the login, it was causing an error but worked without.

this.httpService.signIn(form.value).subscribe((response) => {
  let authtoken = response;
  this.sink.setJwt(authtoken).then(() => {
    //this.navCtrl.pop();
  });
});

and my logout button

doLogout() {
this.httpService.logOut()
  .subscribe(
    (res: any) => {
      this.storage.remove('Token');
      this.sink.setJwt(null);
    }
  );

}

And that works out really nice for my http.service.ts when making requests.

setupAuth() {
  let tokenFromSink = this.sink.getJwt();
  const headers = new Headers();
  headers.append('Content-Type', 'application/json');
  headers.append('Auth', tokenFromSink);
  return headers;
}
1 Like