Authentication emberjs组件表单动作

我正在尝试对DRF令牌进行身份验证

我已经成功地使用我创建的auth应用程序登录

我想我会很圆滑，让登录表单成为一个组件

但是，由于将其作为一个组件，我无法登录，因此出现了断言失败

我的模板/components/auth-login.hbs模板看起来很像

<form class='navbar-form navbar-right' {{action 'authenticate' on='submit'}}>
<div class="form-group">
{{input id='identification' placeholder='Username' type='text' class='form-control' value=identification}}
{{input id='password' placeholder='Password' type='password' class='form-control' value=password}}
</div>
<button type="submit">Login</button>
</form>

它作为一个应用程序工作，但不是一个组件

---

如果我清空模板，并使用

auth

route/app，它的效果会很好

选项1。您需要在

auth login

组件的操作哈希中定义操作

authenticate

。
备选案文2。您可以在控制器中保留

标识

、

密码

属性和

身份验证

操作。并包括如下所示的auth组件

app/templates/application.hbs

{{auth-component identification=identification password=password authenticate="authenticate" }}

import Ember from 'ember';
export default Ember.Component.extend({
    actions: {
        authenticate() {
            this.sendAction('authenticate'); //this will call corresonding controller authenticate method through bubbling.
        }
    }
});

import Ember from 'ember';

export default Ember.Controller.extend({
  session: Ember.inject.service(),

  actions: {
    authenticate: function() {
      var credentials = this.getProperties('identification', 'password'),
        authenticator = 'authenticator:jwt';

      this.get('session').authenticate(authenticator, credentials).catch((reason) => {
        this.set('errorMessage', reason.error || reason);
      });
    }
  }
});

app/components/auth component.js

{{auth-component identification=identification password=password authenticate="authenticate" }}

import Ember from 'ember';
export default Ember.Component.extend({
    actions: {
        authenticate() {
            this.sendAction('authenticate'); //this will call corresonding controller authenticate method through bubbling.
        }
    }
});

import Ember from 'ember';

export default Ember.Controller.extend({
  session: Ember.inject.service(),

  actions: {
    authenticate: function() {
      var credentials = this.getProperties('identification', 'password'),
        authenticator = 'authenticator:jwt';

      this.get('session').authenticate(authenticator, credentials).catch((reason) => {
        this.set('errorMessage', reason.error || reason);
      });
    }
  }
});

app/controllers/application.js

{{auth-component identification=identification password=password authenticate="authenticate" }}

import Ember from 'ember';
export default Ember.Component.extend({
    actions: {
        authenticate() {
            this.sendAction('authenticate'); //this will call corresonding controller authenticate method through bubbling.
        }
    }
});

import Ember from 'ember';

export default Ember.Controller.extend({
  session: Ember.inject.service(),

  actions: {
    authenticate: function() {
      var credentials = this.getProperties('identification', 'password'),
        authenticator = 'authenticator:jwt';

      this.get('session').authenticate(authenticator, credentials).catch((reason) => {
        this.set('errorMessage', reason.error || reason);
      });
    }
  }
});

---

如上所述，添加了

components/auth-login.js

并获得了“未处理任何操作‘验证’”

app/controllers/auth-login.js

-这应该是

app/components/auth-login.js

，并将现有代码从

app/controllers/auth-login.js

文件移动到相应的控制器