登录后刷新应用程序路径

Question

I would like to know what the correct way is to refresh my application route after a login, so that my model is loading correctly. At the moment i only get the desired results after hard refreshing the browser.

My application.js (app/routes/application.js)

import Ember from 'ember';

export default Ember.Route.extend({

  beforeModel: function() {
     return this.get("session").fetch().catch(function() {});
   },

  model() {
    console.log("Session is:" + this.get("session.uid"));
    if(this.get("session.uid")) {
      return this.store.find('user', this.get('session.uid')).then(function(user){
        return user;
      });
    }
  },

  actions: {
    accessDenied() {
      this.transitionTo('login');
    },
    logout: function() {
      this.get('session').close().then(function() {
        this.transitionTo('index');
      }.bind(this));
    }
  },
});

My login.js (app/routes/login.js)

import Ember from 'ember';

export default Ember.Route.extend({
  beforeModel: function() {
    if(this.get('session.isAuthenticated')){
      this.transitionTo('dashboard');
    }
  },
  actions: {
    login: function() {
      var controller = this.get('controller');
      var email = controller.get('userEmail');
      var password = controller.get('userPassword');
      this.get('session').open('firebase', {
        provider: 'password',
        email: email,
        password: password
      }).then(function() {

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

The problem takes place in my application.hbs template. In here i'm calling {{model.firstName}} etc

My application.hbs (app/templates/application.js)

{{#if session.isAuthenticated}}
  <div class="sidebar-menu">
    <div class="brand">
      <strong>Project</strong>Todo
    </div>
    {{partial 'navbar'}}
  </div>
  <div class="main-content">
    <div class="topbar">
  <div class="current-user">
    <div class="media-object" data-toggle="example-dropdown">
      <div class="media-object-section">
          <div class="current-user-image" style='background-image:url({{model.userImage}})'>
          &nbsp;
        </div>
      </div>
      <div class="media-object-section middle">
        {{model.firstName}} {{model.lastName}} <svg role="img"><use xlink:href="/assets/icons.svg#icon-angle-down"></use></svg>
      </div>
    </div>
  </div>
  {{#zf-dropdown id="example-dropdown"  }}
    <ul class="menu vertical">
      <li>
        {{#link-to 'user'}}My Account{{/link-to}}
      </li>
      <li>
        {{#link-to 'setting'}}View settings{{/link-to}}
      </li>
    </ul>
     <button {{action 'logout'}}>Logout</button>
  {{/zf-dropdown}}
</div>
    {{#liquid-spacer growDuration=250}}
      {{#each flashMessages.queue as |flash|}}
        {{flash-message flash=flash messageStyle='foundation'}}
      {{/each}}
    {{/liquid-spacer}}
      {{outlet}}
  </div>
{{else}}
{{outlet}}
 {{/if}}

Answer 1

Just don't load the model in the application route. Create a subroute 'start' route where you load your model:

Application route

import Ember from 'ember';

export default Ember.Route.extend({

  beforeModel: function() {
    return this.get("session").fetch().catch(function() {});
  },

  model() {
    if(this.get("session.uid")) {
      this.transitionTo('start');
    }

    this.send('accessDenied');
  },

  actions: { ... }
});

Application hbs

Your template code if user is not logged in

---

Start route

import Ember from 'ember';

export default Ember.Route.extend({
  beforeModel() {
    // You should make a mixin or something for this check, and apply this to all your subroutes
    if(!this.get("session.uid")) {
      this.transitionTo('application');
    }
  },

  model() {
    return this.store.find('user', this.get('session.uid')).then(function(user){
      return user;
    }); 
  }
});

Start hbs

Your template code if user is logged in