How to verify ACL in a template - ember.js

Question

How should a template lookup the user access to a specific route before displaying a link/action?
Considering the routes already contain a list of authorized roles, should a simple template helper/component lookup the view property and validates access?
( something like {{#if has-access-to 'items.new'}} ? )
Routes are currently "protected" using a simple ACL solution:
AclRouteMixin
import Ember from 'ember';
var accountTypes = {
1: 'member',
2: 'manager',
3: 'owner'
};
export default Ember.Mixin.create({
beforeModel: function beforeModel(transition) {
this._super(transition);
var accountType = this.get('session.accountType');
var role = accountTypes.hasOwnProperty(accountType) ? accountTypes[accountType] : 'unknown';
if (this.get('roles') && !this.get('roles').contains(role)) {
transition.abort();
this.transitionTo('unauthorized');
}
}
});
Route
export default Ember.Route.extend(AuthenticatedRouteMixin, AclRouteMixin, {
roles: [ 'manager', 'owner' ]
});
EDIT
Since the server knows the permissions it is much easier to include a policy object ( or per-entity properties ) than trying to duplicate the authorization logic.

Answer 1

This talk ( linked by MilkyWayJoe ) explains a really simple way to setup authentication / ACL.
The session object ( or each API response ) could contain a Policy object that contains true/false values.
Template
{{#if session.policy.canCreateItems}}{{link-to 'New Item' 'items.new'}}{{/if}}
{{#if item.policy.canEdit}}{{link-to 'Edit' 'items.edit' item}}{{/if}}
Authenticator ( if using ember-simple-auth )
var session = {
userId: response.user_id,
policy: {}
};
for(var p in response.policy) {
if (response.policy.hasOwnProperty(p)) {
session.policy[p.camelize()] = response.policy[p];
}
}
API responses
{
"items": [{
...
policy: {
can_delete: true,
can_view: true,
can_edit: true
}
}],
"policy": {
can_create: true
}
}

Answer 2

The way I would do it is load up the permissions on an auth route that all other routes extend, as for checking it and displaying links I went ahead with a component:
import Ember from 'ember';
var Component = Ember.Component;
export default Component.extend({
hasPermission: function() {
var permission = this.get('permission');
return this.get('auth.permissions').indexOf(permission) !== -1;
}.property('permission')
});
As for the template:
{{#if hasPermission}}
{{yield}}
{{/if}}
And simply call it from links:
{{#can-do permission="view_tables"}}
{{link-to "tables" "tables" class="nav__link"}}
{{/can-do}}
Hope it helps. Let me know if you have any questions.