Question

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

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

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

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

我的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

不要在应用程序路径中加载模型。创建一个子路由＆＃39; start＆＃39;加载模型的路线：

申请路线

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

申请hbs

Your template code if user is not logged in

开始路线

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

Your template code if user is logged in

登录后刷新应用程序路径

1 个答案: