How to invoke index/index route's model hook after user's authorization?

Question

Hi I'm making an app using Ember and Firebase in which user can create a new account, log in and should be able to see information about his account and some protected routes only when he is authorized. So that non-authorized users can see only 2 routes: index ('/') which displays login form and link to signup route ('/signup') which displays and allows them to create a new account. My app/router.js Router looks like this:

Router.map(function() {
  this.route('signup');
  this.route('index', {path: '/'}, function() {
    this.authenticatedRoute('index', {path: '/'});
    this.authenticatedRoute('events');
    this.authenticatedRoute('about');
  });
});

app/templates/index.hbs contains login form and when the user logs in the nested index route is rendered but it's model hook isn't invoked until it is refreshed. How to make it work?

app/templates/index.hbs

{{#unless session.isAuthenticated}}

  {{signin-form store=store session=session authorized="authorized"}}

{{else}}

  {{#link-to 'index.index'  class="item"}}Home{{/link-to}}
  {{#link-to 'index.events' class="item"}}Events{{/link-to}}
  {{#link-to 'index.about'  class="item"}}About{{/link-to}}


  {{outlet}}

{{/unless}}

app/routes/application.js

import Ember from 'ember';

export default Ember.Route.extend({
  beforeModel() {
    return this.get("session").fetch().catch(function() {});
  },
  actions: {
    signOut() {
      this.get('session').close();
      this.transitionTo('index');
    },
    accessDenied() {
      this.transitionTo('index');
    },
    authorized() {
      console.log('authorized');
      this.transitionTo('index');
    }
  }
});

app/components/signin-form.js

import Ember from 'ember';

export default Ember.Component.extend({
  didRender() {
    this._super(...arguments);
    this.$('form.ui.form').form();
  },

  signIn() {
    let { userPassword, userEmail }
      = this.getProperties('userPassword', 'userEmail');
    console.log('Logging with', userPassword, userEmail);
    this.get("session").open("firebase", { 
        provider: 'password',
        email: userEmail,
        password: userPassword
    }).then((data) => {
      console.log(data);
      this.sendAction('authorized');
    });
  },

  actions: {
    submit() {
      this.signIn();
    }
  }

});

Lukasz K Lukasz K · Accepted Answer · 2016-04-07T22:11:30

In the app/routes/application.js I've changed

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

into

authorized() {
  this.refresh();
}

and now it works. But in general I still have doubts about this solution so if you see better/ember way of doing that I would be glad to hear about it.

How to invoke index/index route's model hook after user's authorization?

1 Answers