0.1.0 • Public • Published


Ember addon for CASL which makes it easy to add permissions in any Ember application.

This package allows to integrate @casl/ability with Ember application.

It provides:

  • Ability service that allows you to define CASL ability compatible with Ember tracked properties.
  • Can/Cannot component that allow to hide or show UI elements based on user ability to see them.


  • Ember.js v3.20 or above
  • Ember CLI v3.20 or above
  • Node.js v10 or above
  • ember-auto-import v2.0 or above


ember install ember-casl


Ability Service

Define ability like regular Ember services by extending AbilityService.

// services/post-ability.js
import { tracked } from '@glimmer/tracking';
import AbilityService from 'ember-casl/services/ability';

export default class PostAbility extends AbilityService {
  @tracked isWriter = false;

  get definition() {
    return ({ can, cannot }) => {
      can('read', 'post');
      if (this.isWriter) {
        can('write', 'post');
      } else {
        cannot('write', 'post').because("You're not a writer");

The definition getter should return a function taking destructured AbilityBuilder as argument (build excluded).

It allows you to define very complex reactive ability (eg. Ability based on tracked property or another service).

Your newly created Ability service expose some fields

Name Type Description
ability CASL Ability Original CASL Ability
can Method Wrapper on CASL Ability method can
cannot Method Wrapper on CASL Ability method cannot
relevantRuleFor Method Wrapper on CASL Ability method relevantRuleFor

Then you can use those abilities as regular services in your Ember application.

// components/dummy.js
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';

export default class Dummy Component extends Component {
  @service postAbility;

  get canRead() {
    return this.postAbility.can('read', 'post');

  get cannotWriteReason() {
    return this.postAbility.relevantRuleFor('read', 'post').reason;

Can / Cannot Helpers

You can use can & cannot helpers in your templates.

{{#if (can 'read' 'post' service='post-ability')}}
  <span>You're a reader</span>
{{#if (cannot 'write' 'post' service='post-ability')}}
  <span>You're not a writer</span>

Positional params are CASL Ability can / cannot arguments. service is the name of the Ember service.


See the Contributing guide for details.


This project is licensed under the MIT License.

Package Sidebar


npm i ember-casl

Weekly Downloads






Unpacked Size

13.2 kB

Total Files


Last publish


  • thiberaw
  • npmjs-concordnow
  • jonathan.pruvost