相同的URL路径，但根据用户角色加载不同的组件-Angular

Question

I want to have 2 components with the same route (root '/'), but loading just one based on the User's role (Guest or Authenticated). So, a home page for Guest and a home page for Authenticated with the same path.

I tried creating a guard for Guest and a guard for Authenticated users and apply each in its component in the Routes array, like this:

export const AppRoutes: Routes = [
    {
        path: '',
        component: GuestLayoutComponent,
        canActivate: [GuestGuard],
        children: [
            {
                path: '',
                loadChildren: './guest-components/guest.module#GuestModule',
            }
        ],
    },
    {
        path: '',
        component: AuthLayoutComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: '',
                loadChildren: './auth-components/auth.module#AuthModule',
            }
        ],
    },
    {
        path: '**',
        component: ErrComponent,
    },
];

But it created a infinite loop.

Also sharing:

GuestRoutes :

export const GuestRoutes: Routes = [
    {
        path: '',
        children: [
        {
            path: '',
            component: GuestHomeComponent,
        }, {
            path: 'about-guest',
            component: GuestAboutComponent,
            pathMatch: 'full'
        },
        ]
    }
];

AuthRoutes:

export const AuthRoutes: Routes = [
    {
        path: '',
        children: [
        {
            path: '',
            component: AuthHomeComponent,
        }, {
            path: 'about',
            component: AuthAboutComponent,
            pathMatch: 'full'
        },
        ]
    }

AuthGuard:

export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}

    canActivate(route: ActivatedRouteSnapshot,
                state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        return this.authService.isAuthenticated()
        .then(
            (authenticated: boolean) => {
            if (authenticated) {
                return true;
            } else {
                this.router.navigate(['/']);
                return false;
            }
            }
        );
    }
}

GuestGuard:

export class GuestGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}

    canActivate(route: ActivatedRouteSnapshot,
                state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        return this.authService.isAuthenticated()
        .then(
            (authenticated: boolean) => {
            if (authenticated) {
                this.router.navigate(['/']);
                return false;
            } else {
                return true;
            }
            }
        );
    }
}

Please find the link to the demo .

How can I achieve this? I would appreciate any help.

Answer 1

I don't think it is possible to have 2 components with the exact same route. I can't remember having seen a solution for that before.

I don't know exactly why you want to accomplish this, but hopefully the following approach could help you. Create a parent component called ContainerHomeComponent that you point your route towards. In the .ts file you query the "this.authService.isAuthenticated()" to find if the user is authenticated and assign to a propery called "authenticated". In the template all you have is:

<app-guest-home-component *ngIf="!authenticated"></app-guest-home-component>

<app-auth-home-component *ngIf="authenticated"></app-auth-home-component>