Ember.js 登录后刷新应用程序路由

我想知道登录后刷新应用程序路径的正确方法是什么，以便正确加载模型。目前，我只是在硬刷新浏览器后才得到想要的结果

My application.js（app/routes/application.js）

My login.js（app/routes/login.js）

问题发生在我的application.hbs模板中。在这里，我调用{{model.firstName}}e.t.c

My application.hbs（app/templates/application.js）

{{#if session.isAuthenticated}
项目待办事项
{{partial'navbar'}}
{{model.firstName}{{model.lastName}}
{{{#zf dropdown id=“example dropdown”}


{{{#链接到“用户”}我的帐户{{/链接到}


{{{#链接到“设置”}查看设置{{/链接到}


注销
{{/zf下拉列表}
{{{#液体间隔生长持续时间=250}
{{{#每个flashMessages.queue as{flash}
{{flash message flash=flash messageStyle='foundation'}
{{/每个}}
{{/液体间隔物}}
{{outlet}}
{{else}
{{outlet}}
{{/if}

只是不要在应用程序路径中加载模型。在加载模型的位置创建子例程“开始”路线：

申请路线

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: { ... }
});

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;
    }); 
  }
});

应用hbs

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));
    }
  },
});

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));
    }
  }
});

{{#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}}

Your template code if user is not logged in

Your template code if user is logged in

---

开始路线

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: { ... }
});

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;
    }); 
  }
});

启动hbs

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));
    }
  },
});

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));
    }
  }
});

{{#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}}

Your template code if user is not logged in

Your template code if user is logged in

---

它与我在以下URL中定义的相同：-您可以引用它进行编码。在此之前，beforeModel钩子解析。get（“session.uid”）实际上准备好了吗？如果是这样，beforeModel钩子中的承诺能帮助您吗？（在model返回获取session.uid的承诺之前，不要移动到模型钩子中）。