ensure user login in Ember app

Question

What is the best way to ensure that user is logged in into the Ember application?

I would like to intercept any URL before the routing is excited, show a modal popup with user_id/password, and go to the original URL.

Perhaps something similar to Rail's application_controller#before_filter which gets executed before any other controller methods.

I have the following routing:

App.Router.map(function(){
    this.resource('folder', {path: '/'}, function(){
        this.resource('files', {path: '/:folder_id'}, function(){
            this.route('index');
        });
    });
});

I am trying to setup ApplicationRoute:

App.ApplicationRoute = Ember.Route.extend({
    activate: function(){
        console.log("activating app route");
    }
});

But the problem is, if I hit index.html#/folder01, folder route is executed before the application route.

Summarizing the workflow ideally should look like:

1. User hits index.html#/folder01 URL
2. App checks whether user logged in. If not modal popup appears
3. After login, the app should render index.html#/folder01 URL

Thanks a lot!

Answer 1

Looks like I found a solution that works. Here it is:

App.Router.reopen({
    startRouting: function() {
        if (!App.userProfile.get('loggedIn')) {
            $("#login_dialog").modal('show').one('click', "#login_btn", function(){
                $("#login_dialog").modal('hide');
                App.userProfile.set('loggedIn', true);
                App.startRouting();
            });
        } else {
            this._super();
        }
    }
});

If the App detects a session timeout, it executes window.location.reload(). Would be nice to have App.reset() working but afaik it has not been implemented correctly yet.

I am not 100% sure this solution does not have problems like memory leaks or things like that. I would love to hear anything from the Ember experts about this approach.

Thanks

Answer 2

You can use your route to accomplish this:

App.DatasetEditRoute = Ember.Route.extend({
  redirect: function() {
    if (this.controllerFor('currentUser').get('isSignedIn') === false) {
      this.transitionTo('user.login');
    }
  }
});

Answer 3

I've created userapp-ember which is an Ember.js module for user authentication. It's meant for UserApp, but it's open-source, so you could modify it to use your own service instead if you'd like.

To demonstrate briefly how I solved the problem:

App.ProtectedRouteMixin = Ember.Mixin.create({
  beforeModel: function(transition) {
    // check if the user if authenticated
    if (!isAuthenticated) {
      transition.abort();
      this.transitionTo('login'); // transition to the login route
    }
  }
});

App.IndexRoute = Ember.Route.extend(App.ProtectedRouteMixin);

I used a mixin to extend all routes that I wanted to protect. The mixin listens on the beforeModel event and aborts the transition if the user is not logged in (isAuthenticated). Then, instead of redirecting to the login route, you could show a login popup instead. After a successful login, reload the page or transition to the same route.