1

Trying to execute this code within a component's template

// components/my-component.js
{{#if session.isAuthenticated}}
  <a {{action 'invalidateSession'}}>Sign out</a>
{{else}}
  {{#link-to 'signin'}}Sign in{{/link-to}}
{{/if}}

However, when clicking "Sign out" button I get this error

Error: <...@component:my-component::ember381> had no action handler for: invalidateSession

How do I make "invalidateSession" available from a component?

Flavio
  • 846
  • 1
  • 9
  • 21

2 Answers2

2

You can just implement your own invalidateSession action:

actions: {
  invalidateSession: function() {
    this.get('session').invalidate();
  }
}

or simply forward the action from the component to the route:

{{my-component invalidateSession='invalidateSession'}}
marcoow
  • 4,062
  • 1
  • 14
  • 21
  • Your first solution works great, however I can't get the second one to work. I create a new component using `{{my-component invalidateSession='invalidateSession'}}`; then, what should I use inside my component's template? `{{action 'invalidateSession'}}` or `{{action invalidateSession}}` (both of these don't seem to work)? – Flavio Mar 16 '15 at 15:15
  • Yeah, there's a bit more to it actually. You need to define the `invalidateSession` action in the component itself and do `this.sendAction('invalidateSession')` in its implementation so that the action is forwarded to the controller/route the component os rendered in. – marcoow Mar 16 '15 at 19:56
0

You need to add the Simple Auth ApplicationRouteMixin to your ApplicationRoute. For example if you are using ES6 modules do

import ApplicationRouteMixin from 'simple-auth/mixins/application-route-mixin';

ApplicationRoute = Ember.Route.extend ApplicationRouteMixin,

The action should bubble up to the application route, where it will be handled.

See the documentation here

andorov
  • 4,197
  • 3
  • 39
  • 52
  • I'm using ember-cli, and that code is already in "routes/application.js". Doesn't work. – Flavio Mar 15 '15 at 21:54
  • Is the action actually bubbling up to `ApplicationRoute`? If you're triggering it inside a component you will need to explicitly bubble it up with `this.sendAction`. I believe controllers and routes will do this automatically but components will not. – andorov Mar 15 '15 at 23:42
  • Documented [here](http://emberjs.com/guides/components/sending-actions-from-components-to-your-application/). You would do something like `my-component logoutAction='invalidateSession'` and inside it `sendAction('logoutAction', )`. I think if you just define `action='something'` then `this.sendAction()` will default to that. If you have multiple levels of components currently you need to pass it up through each one. – andorov Mar 16 '15 at 01:16
  • This seems to work, although after the signout the page is reloaded twice :/ – Flavio Mar 16 '15 at 14:17