Angular2 Router - how to push navigation after authentication?

Question

I am new to Angular2 routing. I have a use case where the Home page simply has a login dialog. There are no navigational elements on this page. When the user successfully logs in, they should land on the Main page that has tabs to navigate to other pages of the app. How can I configure the router for this use case?

Edit

To clarify, this is the page structure for my use case:

     Home (Login) (/)
     /       |      \
  Page1    Page2    Page3
(/page1) (/page2)  (/page3)

The Home page has no navigation. The only way to navigate out of the Home page is to successfully log in. This should take you to Page1. Pages 1, 2 & 3 show a tab bar at the top to navigate between them.

I looked at the example in the Angular2 docs. There the app starts at the Page1, Page2 level directly. The navbar is visible as soon as the app comes up. It is housed at the app level, in app.component.ts.

So my question is: how do I achieve the page structure shown above? How would the code and components be structured to achieve this? I am guessing that the app component will be blank with just a router outlet, with the path / taking me to the home page:

@Component({
  template:  `
    <router-outlet></router-outlet>
  `,
  directives: [RouterOutlet]
})
@RouteConfig([
  {path:'/',         name: 'Home',  component: HomeComponent, useAsDefault: true},
  {path:'/page1',    name: 'Page1', component: Page1Component},
  {path:'/page2',    name: 'Page2', component: Page2Component},
  {path:'/page3',    name: 'Page3', component: Page3Component}
])

Routes /page1, /page2 etc. take me to authenticated pages. Each one of these pages would include a common navbar component. Does this approach look good?

are you talking about router.navigate(); ?

Pardeep Jain
– Pardeep Jain

2016-01-31 07:54:38 +00:00
Commented Jan 31, 2016 at 7:54 — Pardeep Jain
– Pardeep Jain, Commented Jan 31, 2016 at 7:54

episodeyang · Accepted Answer · 2016-01-31 07:24:13Z

1

you can use the window.location.href to change the route like this:

window.location.href = '/create/team-name?email=' + email;

answered Jan 31, 2016 at 7:24

episodeyang

81210 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Naresh · Accepted Answer · 2016-01-31 19:08:56Z

0

Answering my own question! The approach I laid out in the Edit section works like a charm. The app component is practically blank with just a router outlet. The path / takes me to the home page.

answered Jan 31, 2016 at 19:08

Naresh

25.9k35 gold badges147 silver badges216 bronze badges

Collectives™ on Stack Overflow

Angular2 Router - how to push navigation after authentication?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related