Ember index and application templates

1

I can’t really figure out how to work with index and application templates, - there is something unclear about their behaviour. Here are some extracts from Ember guides.

  1. The index template will be rendered into the {{outlet}} in the application template.
  2. At every level of nesting (including the top level), Ember automatically provides a route for the / path named index.
  3. The application route is entered when your app first boots up. Like other routes, it will load a template with the same name (application in this case) by default. You should put your header, footer, and any other decorative content here. All other routes will render their templates into the application.hbs template’s {{outlet}}.

So, following the above guide lines, I modified application.hbs template to contain the navbar with login/logout buttons. Then, after the User signed in, I redirect it to dashboard route and in this case the dashboard.hbs template gets injected into {{outlet }} in the application.hbs template.

The problem I have is as follows:

  1. If I use links only to navigate between different routes and pages in my app, it works fine.
  2. If I change the URL manually in the browser to http://localhost:4200, I have an empty page with just the navbar without the content of dashboard template.

How to do in this case ? I’m using ESA as authentication add-on and redirect the user to dashboard route after authentication:

#environment.js

ENV['ember-simple-auth'] = {
    routeAfterAuthentication: 'dashboard'
  };

Any ideas ? Thank you.

2

You don’t need put your dashboard into application/index. Just reset the dashboard route path.

router.js

 route('dashboard', { path: '/' }, function() {})
3

Yeah, I knew that, - it would be too easy. But in this case I have another problem raised in my previous post. I don’t have login template, as I’m using ESA Implicit grant flow for authentication (I hit the URL to get a token).

4

so, your login page is your home page ‘/’ or your dashboard page.

5

There is no login page at all. I have a navbar with a button, either login or logout, depending on the status of the current user (autenticated or not: checking it with session.isAuthenticated). Here are my routes:

Router.map(function() {
  this.route('auth-error');
  this.route('callback');
  this.route('dashboard');
});

You can take a look at the code-source as well.

6

http://ember-simple-auth.com/api/classes/Configuration.html

what happens if u define: https://github.com/belgoros/decastore-ember/blob/master/config/environment.js#L32

authenticationRoute: 'index'
7

@heatbr Thank you for your response. I figured out how to get it working: I just created index.js route and defined beforeModel hook as follows:

export default Route.extend({
  session: service('session'),

  beforeModel: function() {
    if (this.get('session.isAuthenticated')) {
      this.transitionTo('dashboard');
    }
  }
});