emberjs component form action

Question

Я пытаюсь выполнить аутентификацию с помощью токена DRF.

Я успешно смог войти в систему, используя приложение auth, которое я создал.

Я думал, что буду пятно и сделаю форму входа в систему компонентом.

С момента создания этого компонента, однако, я не могу войти в систему, и я получаю Assertion failure.

Мои шаблоны/Компоненты/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> 

У меня также есть приложение/контроллеры/Авт-login.js

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

Он работает как приложение, но не как компонент.

Если я закрою шаблон и использую маршрут/приложение auth, он работает персиковый.

Answer 1

Вариант 1. Вам необходимо определить действие authenticate в действии хэш auth-login.
Вариант 2. Вы можете сохранить identification, password и authenticate действий в контроллере. и включают в себя компонент аутентификации-, как показано ниже,

приложение/шаблоны/application.hbs

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

приложение/компоненты/авт-component.js

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

приложение/контроллеры/application.js

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