Creating a login page that doesn't use the application.hbs?


#1

I just started writing my ember app and i’m having problems structuring the base routes. My application needs to be protected by a login page that is presented to the user if they are not authenticated. This /login route shouldn’t contain any of the navigation, footers, and side-menu’s that are present in the rest of the whole application. I started off by adding all of those components to the application.hbs which is cool because it is rendered with every route. But for the /login route and potentially any other unauthorized user routes this isn’t the case.

I’ve seen this explanation on stack overflow about it: http://stackoverflow.com/questions/28251084/template-without-application-hbs-as-root Unfortunately i don’t have enough reputation to comment and ask for a better explanation.

This post tries to explain it but its not quite doing it for me. http://stackoverflow.com/questions/14973556/what-is-the-difference-between-a-route-and-resource-in-new-router-api

The docs don’t seem to mention resource either.

What would be the best way to set the /login route off on its own?


#2

The way we approached this problem in our app was to define two top-level resources to represent the two different layouts. One for all secured pages, and another for the unsecured login page.


#3

Agreed. I believe this is the way to go.

App.Router.map(function () {
  this.resource('app', { path: '/app' }, function () {
    this.route('accounts')
  });
  
  this.resource('nonapp', { path: '/' }, function () {
    this.route('login');
  });
});

Now your application.hbs contains just an {{outlet}}


#4

What is the difference between resource and route? The explanation you use shows resources but it can also be completed the following way.

// Regular authentication protected resources
  this.route('portal', {path: '/'}, function(){

  });

  // Public resources that do not require login
  this.route('public', function(){

      // The main login route
      this.route('login', function() {
        this.route('reset');
        this.route('unlock');
      });
  });

It appears resource has been removed from the documentation in 1.11.

Here it is in 1.10: http://guides.emberjs.com/v1.10.0/routing/defining-your-routes/#toc_resources And it is gone in 1.11: http://guides.emberjs.com/v1.11.0/routing/defining-your-routes/


#5

Stand clear from resource(), for its fate is sealed and neck’s already on chopping block. :wink:

Resources allowed you to nest themselves, they also had some extra magic in how their names are handled in neesting (ergo ‘comments’ resource nested within ‘post’ resource was accessible via {{link-to "comments"}} instead of {{link-to "posts.comments"}} (same rule stood for routes/controllers classes implemented for those).

Howefect you can nest routes as well for some time now, and arguably namespace resetting isn’t that much of game changes for devs to keep resource around anymore.


#6

This may be stupid, but works for me. One simple if statement in application.hbs like {{#if isAuth}}… else {{ render ‘login’}} and this is for ember 1.10.0


#7

Authentication as a session property extending controllers and routes, such as the standard for simple-auth and torii. Set a boolean like “isAuth” for when a session is authenticated.

Thus on index route:

redirect: function() {
    if (!this.get('session.isAuth')) {
        this.transitionTo('login');
    }
}

#8

I’ve also gone the if route:

{{!-- application/template.hbs --}}
{{#if session.isAuthenticated}} 
  app layout
{{else}}
  {{outlet}}
{{/if

and something similar in index.hbs, so that the index route of myapp.com shows a welcome/login page for unauthed users, and a “home” page for auth’d users (like twitter, fb, etc.)