Login page before tabs page - ionic 4


#1

Hi,
I’ve downloaded the tab project of ionic 4 version.
I’ve tried to add a login page before the TabPage. But it doesnt’ work for me.

Here my app-routing.module.ts file

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

And my tabs.router.module file

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { TabsPage } from './tabs.page';
import { HomePage } from '../home/home.page';
import { AboutPage } from '../about/about.page';
import { ContactPage } from '../contact/contact.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tabs',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full',
      },
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'about',
        outlet: 'about',
        component: AboutPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  },
  {
    path: 'tabs',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

The page which is displayed is the first declared in TabsPageModule (here AboutPage is shown) without the tabs under.

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    TabsPageRoutingModule,
    AboutPageModule, 
    HomePageModule,
    ContactPageModule
  ],
  declarations: [TabsPage]
})
export class TabsPageModule {}

Does any body know how to fix this ?

Thank’s


#2

Code looks fine only, can you try adding login route before tabs and restart the console( rerun ionic serve).

:slight_smile:


#3

Thank’s for the answer, but it have no effects.


#4

You might want to investigate Route Guards so that you can ensure the person has logged in no matter what page they visit.

I have that requirement and will be using Route Guards to control program flow.


#5

Thank’s for the reply, I’ve also tried with a guard

auth.guard

 canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean | Observable<boolean> | Promise<boolean> {
    return new Promise((resolve, reject) => {
      this.storage.ready().then(() => {
        this.storage.get('currentUser').then((val) => {
          if (val) {
            resolve(true);
          } else {
            this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
            resolve(false);
          }
        });
      });
    });

app-routing.module

const routes: Routes = [
  { path: '', redirectTo: 'tabs', pathMatch: 'full' },
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule', canActivate: [AuthGuard], },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' }
];

tabs.router.module

const routes: Routes = [
    {
      path: '',
      redirectTo: '/tabs',
      pathMatch: 'full',
      canActivate: [AuthGuard],
    },
    {
    path: 'tabs',
    component: TabsPage,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'tabs',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full',
      },
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'about',
        outlet: 'about',
        component: AboutPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  }
];

#6

take a look at the solution I posted for side-menu auth, the approach should work for you here.

but i thing you need to change this line

{ path: '', redirectTo: 'tabs', pathMatch: 'full' },

to this

{ path: '', redirectTo: 'login', pathMatch: 'full' },

#7

I tested your solution.
My problem is not with the auth part which is running in other projets but on showing tabs on after login page.
you can try to add tabs to your project to see my problem.
Thank’s


#8

You don’t know where the problem is, I assume that is why you are asking the question… I am going to suggest that you post a project for review


#9

I create a project on github : https://github.com/jekes/Ionic-Tab-Auth


#10

#11

Ok, but the tabs doesn’t appears in the project after login …


#12

That is an issues with your code and how you setup the templates - I suggest you open another issue/ticket about how to create a tab based application


#13

I’ve used the “tabs” project build by ionic team project so I do not need to reopen a ticket to create a tab based application. I’ve create the same application with Ionic 3, here I have a problem to migrate to Ionic 4
My problem was clearly mentioned, so stop responding to my questions, all the answers you gave are off based


#14

Try this - Ionic 4 tabs navigation post login - Solution


#15

Thank’s, it works now !


#16

your tabs don’t show in your project either dude - on your link…


#17

This is a problem with Ionic 4, I get the exact same behaviour. And your stackblitz is pointless and useless.


#18

thanks for the feedback, can you be more specific :slight_smile: