@mafortis wrote:

I am using tabs style, then I placed my tabs URL under authentication and since then after user is logged in and open the app redirect doesn’t work properly.

Issues

1. Since I placed my tabs under auth guard my default URL tabs/groups becomes like tabs/tabs/groups
2. When user is logged in and re-open the app they will redirect to localhost/tabs instead of localhost/tabs/tabs/groups

Note: If my first issue be solve (extra tabs be removed) then current redirect would work as expected as tabs default path is tabs/groups

Code

AuthGuard

export class AuthGuardGuard implements CanActivate {
  constructor(
    private router: Router,
    public auth: AuthService
  ) { }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    const currentUser = this.auth.isLoggedIn;
    if (currentUser) {
      return true;
    }
    this.router.navigate(['/login']);
    return false;
  }
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AuthGuardGuard } from '../app/Guards/auth-guard.guard';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'tabs',
    pathMatch: 'full'
  },
  {
    path: 'login',
    loadChildren: () => import('./Pages/Auth/login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: 'register',
    loadChildren: () => import('./Pages/Auth/register/register.module').then( m => m.RegisterPageModule)
  },
  {
    path: 'intro',
    loadChildren: () => import('./Pages/intro/intro.module').then( m => m.IntroPageModule)
  },
  {
    path: 'tabs',
    canActivate: [AuthGuardGuard],
    loadChildren: () => import('./tabs/tabs.module').then( m => m.TabsPageModule)
  }
];

tabs-routing.module.ts

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'groups',
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
      },
      {
        path: 'phones',
        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },
      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
      },
      {
        path: 'profile',
        loadChildren: () => import('../Pages/Auth/profile/profile.module').then( m => m.ProfilePageModule)
      },
      {
        path: '',
        redirectTo: 'groups',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: 'groups',
    pathMatch: 'full'
  }
];

Any idea where the problem comes from?

Posts: 1

Participants: 1

Read full topic