Having a hard time understanding the navigation with tabs


#1

Hello,

I have my application with 4 tabs, and i want to check if the user is logged in everytime a user switches tab, so i’m using the ‘ionViewCanEnter’ lifecycle hook. But it seems like it only works one the first time the user gets on the tab.
Please don’t mind the design, i’m just experimenting. The login tab is temporary.

Here’s a scenario :

  1. User arrives on Planets tab -> ionViewCanEnter fired
  2. User clicks Research tab -> ionViewCanEnter fired
  3. User clicks Planets tab to get back -> ionViewCanEnter is NOT fired
  4. user clicks Research tab -> ionViewCanEnter is NOT fired

Are the tabs still active in the background when a tab is switched to another ?
I would like to reload the whole tab (Page) everytime because i have to check if the token (jwt) is still valid (not expired) and i have to reload the data from the back-end each time.

Thanks.

Here’s the code i’m using for the tabs :

HTML

<ion-tab [root]="tab1Root" tabTitle="Planètes" [rootParams]="params" tabIcon="ios-planet-outline"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Recherches" [rootParams]="params" tabIcon="ios-stats-outline"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Galaxie" [rootParams]="params" tabIcon="ios-ionic-outline"></ion-tab>
<ion-tab [root]="tab4Root" tabTitle="Login" [rootParams]="params" tabIcon="ios-ionic-user"></ion-tab>

TS

tab1Root = PlanetsPage;
tab2Root = ResearchPage;
tab3Root = GalaxyPage;
tab4Root = LoginPage;

#2

“When the user switches tabs” seems like a weird time to check token validity. I would instead do it whenever you are planning on making HTTP calls that require authentication.


#3

Well i need to make authentication to get the data, i want to refresh the data each time a tab gets refreshed/selected/switched


#4

Well, maybe you’ll want to follow #11694.


#5

Oh i see so it’s an issue
I could make my own menu then


#6

That’s an option. You can also fake tabs using segments.


#7

I’m looking to make a game, so there will be quite some data to display and retrieve on each Page/Tab, could you give me some advice on which menu to use? I’m very new to Ionic

It kinda sucks tabs have this issue, it looked like a very intuitive design to me.

Segments looks fine to me because i don’t need to go back, but it seems like segments are not pages, i really need those lifecycle hooks


#8

‘ionViewCanEnter’ is a bad approach turgodi.

Prefer a check using a provider (service) or at constructor level like if user is authenticated, do something. I use a mix of tabs and segments, and it works fairly well.

Since this is the second time I read the same kind of question today, I point out that Tabs navigation is not exactly made for users with different levels of authentification, unless you intend to rewrite the DOM in the template view for every user level (which seems fairly unefficicent). And unless you build tabs with strong abstraction (which is difficult), you’ll end up with a controller page with tons of useless checks. Not to mention, *ngIf, *ngFor, *ngSwitch when all combined, bite on performance quite hard.


#9

You can make fake tabs out of segments like this:

app.html

<ion-header>
  <ion-segment (ionChange)="onSegmentChange($event)">
    <ion-segment-button value="home">home</ion-segment-button>
    <ion-segment-button value="about">about</ion-segment-button>
  </ion-segment>
</ion-header>
<ion-content>
<ion-nav [root]="rootPage"></ion-nav>
</ion-content>

app.component.ts

rootPage: Page;

onSegmentChange(seg: Segment): void {
  let segval = seg.value; 
   if (segval === 'home') {
    this.rootPage = HomePage;
  } else if (segval === 'about') {
    this.rootPage = AboutPage;
  }
}

#10

Thanks for your advice Franco,
Could you do a simple scenario, i would understand your ‘check’ better (i’m french).

I was planning on having an ionViewCanLeave guard fired when the user wants to switch page. It would call a service to see if the token is still valid (no http call), and if it is (else redirect to login page), call a http service with the token as parameter to get the data for the next page, and finally give the data to the next page and switch the page.

I don’t want to load the page before having the data / before checking that there is a valid token, and since there are no resolve clause before loading a Page i don’t see any other way around those ionViewCanLeave / ionViewCanEnter guard, it looks like the most robust solution for my concern


#11

@turgodi I know, I make fake tabs like that exactly with Segments.
Still, and that’s why I’m not a strong supporter of it, it makes bloated pages with unncessary checks, so on.


#12

What exactly do you consider “bloated” about the sample code I posted? It required absolutely zero changes to either the HomePage or AboutPage from the tabs starter.

Personally, I think attempting to defer the page load will result in perceived sluggish performance. I prefer letting the page load, but firing up a loading spinner if needed.


#13

Sounds great, i’ll try using segments tomorrow:)

I appreciate the time you both took to help me, seems like a great community

And this is a good idea for the loading spinner


#14

@rapropos it was not about YOUR code or idea, relax. As I said, I use segments and happy with it, but it tends to create bloated structures with mid level coders like me.


#15

you can check for authentication in the app.component
subscribe to it
so it updates live if user is not logged in you can take him to the login page or just set a parameter there


#16

@turgodi I know, I make fake tabs like that exactly with Segments.
Still, and that’s why I’m not a strong supporter of it, it makes bloated pages with unncessary checks with mid-level coders like me, so on.
Also, I wanna point out to you that Ionic lifecycle events are not super solid. Personnally, I won’t base anything upon that. Maybe there are stronger now in Ionic 3?


#17

I think this is just FUD. There’s nothing inherent in segments that induces bloat.


#18

@rapropos what means FUD please? Ah Fear Uncerainty and Doubt.


#19

FUD.


#20

Not Only Rapropos. In a use case i have a couple of observables that are shared across segments. So, because I know a couple of flat database values on the same controller, there are shared across both segments of the same tab. Simple and plain, useless loading of data.