Show different tabs based on user type

Hello, I have an ionic 5 project in which I need to change the set of tabs based on logged in user. if it is a client or a coach.

I have my code ready to check for type of logged in user in the tabs.page.ts but I do not know how to change the actual pages list.
can I apply an it statement in tabs-routing.module.ts?

thank you so much

You could attempt it like this; a login page which sets the user level authorization and then conditionally list your tabs pages on tabs.page.ts

export interface User{
    username: string;
    role: string;  // Coach or Client
}

// auth.ts
private loggedUser = new BehaviorSubject<User>(null);

doLogin{
    http.post<User>('login url')
    .subscribe((res)=>{
        this.loggedUser.next(res);
        return true;
    }
    ,(error)=>{
        // Your error handling done here
        ........
    });
}

getLoggedInUser() {
    return this.loggedUser.value;
}

// login.ts

doLogin(){
    if(this.auth.doLogin(this.password, this.username)){
        this.router.navigate(['/tabs']);
    } else {
        // Deal with login failure
        ......
    }
}

// tabs.page.ts

this.currentUser = this.auth.getLoggedInUser();


// tabs.html

<ion-tab-bar slot="bottom">
    <ion-tab-button *ngIf=(currentUser.role === 'coach') tab="coach-profile">
      <ion-icon name="person-outline"></ion-icon>
      <ion-label>Coach</ion-label>
    </ion-tab-button>

    <ion-tab-button  *ngIf=(currentUser.role === 'client') tab="client-profile">
      <ion-icon name="person-outline"></ion-icon>
      <ion-label>Client</ion-label>
    </ion-tab-button>

    ......

  </ion-tab-bar>
// Load your tabs or show tabs based on user role

That at least should get you going…
Remember to check out Observables and also on interface when used to describe data type.

1 Like