I almost give up


#1

Hello everyone. I almost give up with ember. Here is why. Ive got simple authentication in my app. My router looks like this:

App.Router.reopen({

  location: 'auto',

  rootURL: '/'
})

App.Router.map(function() {

  this.resource('sessions', function() {

    this.route('new', { path: '/new'});
  });
  this.resource('users', function() {

    this.route('new', { path: '/new' });

  });

  this.route('top_secret', { path: '/top_secret' });
});

I made object UserRoute which looks like this:

App.UserRoute = Ember.Route.extend({

  beforeModel: function(transition) {

    if (!App.AuthManager.isAuthenticated()) {

      this.redirectToLogin(transition);

    }
  },

  // Redirect to the login page and store the current transition so we can
  // run it again after login

  redirectToLogin: function(transition) {

    var sessionNewController = this.controllerFor('sessions.new');
    sessionNewController.set('attemptedTransition', transition);
    this.transitionTo('sessions.new');
  },

  actions: {

    error: function(reason, transition) {

      this.redirectToLogin(transition);
    }
  }
});

As you expect I extend App.UserRoute when i want user to be logged in. So example is

App.TopSecretRoute = App.UserRoute.extend({
   
  model: function() {

    return this.store.find('user');
  }  
});

My ApplicationRoute looks liek this:

App.ApplicationRoute = Ember.Route.extend({

  init: function() {

    this._super();
    App.AuthManager = App.AuthManager.create();
    App.UserRoute   = App.UserRoute.create();
    App.GuestRoute  = App.GuestRoute.create();
  }
});

And this is working of course. In addition i will say that i instantiate App.UserRoute in application_route in init hook. And I didnt forget calling this._super(). Ok so whats a big deal? I want my login page only to be visible for guest. I don’t want to allow logged in user to see log in page. So this is tedious. Ive done it before i will be easy. And I encounter strange problem. I defined GuestRoute object whick looks liek this:

App.GuestRoute = Ember.Route.extend({

  beforeModel: function(transition) {

    console.log(App.AuthManager) // here i got sth plain object, with property 'apiKey' which is necessary for me.  And if I do App.AuthManager.get('apiKey') I've got 'undefined'. Any ideas? I'm struggling with it for hours. AuthManager is EmberObject with my functions needed for authentication.
    if (App.AuthManager.isAuthenticated()) { 

      this.transitionTo('index');
    }
  }
});

Ok so my question in in code above.

For addition I will paste my session_route which i want to hide from logged in user:

App.SessionsNewRoute = App.GuestRoute.extend({

  model: function() {

    return Ember.Object.create();
  }  
});

I suppose that problem is connected with nesting of routes, but still it looks like a bug and not a real problem. Maybe i do sth wrong because I create global variable App, then App.AuthManager etc. The worst part is that sometimes this pattern work (like i mentioned on first) and sometimes not.


#2

Hey Bartek, could you format the code snippets in your post with three backticks? Would make it easier to understand your issue. Looks a tad confusing now :slight_smile:


#3

Done :wink: I’ve used code instead of three backticks.

Ok so i managed the problem this way: I still cant get property ‘apiKey’ from my App.AuthManager object , even if it is there (i think so). I simply grab my api key by invoking $.cookie(‘apiKey’) etc. But Im curious about that problem. Why when I instantiate App.AuthManager in application_route, i can get properties of that object in App.UserRoute (as I mentioned first in my previous post) and similarly I cant get them in App.GuestRoute. Is it somehow connected with promises? Maybe i should omit creating global variables and use objects as modules? I will try that but maybe hopefully somebody know the answer for this issue?