Angular 2+一个路由由两个组件按条件处理

Question

My app has private and public parts.

If user not logged in then he should see landing page with some 'about text', facebook/twitter links and a link to login/register as a root page of application.

If he is logged in - he should get a dashboard page filled with user specific data as a root of whole application.

And surely, it would be nice to have both of these pages handled by one root route "/".

So i wonder, what is the right way to implement it with angular 2+ and native router?

export const ROUTES: Routes = [{
    path: '/',
    component: isAuthenticated() ? DashboardComponent : LandingPageComponent
}]

Answer 1

Consider using a canActivate guard:

export const ROUTES: Routes = [
    {path: '/', canActivate: [AuthGuard], component: LandingPageComponent},
    {path: '/landing', component: LandingPageComponent}
},

]

In the guard you can check for a login and reroute to the Landing page.