Giter Club home page Giter Club logo

ember-can's Introduction

Ember-can

Simple authorisation addon for Ember.

Build Status

Quick Example

You want to conditionally allow creating a new blog post:

{{#if-can "write post"}}
  <button {{action "new"}}>Write Post</button>
{{else}}
  You can't write a new post
{{/if-can}}

We define an ability for the Post resource in /app/abilities/post.js:

import { Ability } from 'ember-can';

export default Ability.extend({
  canWrite: function() {
    return this.get("user.isAdmin");
  }.property("user.isAdmin")
});

We can also re-use the same ability to check if a user has access to a route:

import Ember from 'ember';
import { CanMixin } from 'ember-can';

export default Ember.Route.extend(CanMixin, {
  beforeModel: function() {
    if (!this.can("write post")) {
      this.transitionTo("index");
    }
  }
});

Installation

Install this addon via npm:

npm install --save-dev ember-can

Compatibility

ember-can has been developed against beta/canary, so isn't compatible with the current 1.8 release.

Abilities

An ability class protects an individual model / resource which is available in the ability as model.

The ability checks themselves are simply standard Ember objects with computed properties:

import { Ability } from 'ember-can';

export default Ability.extend({

  // only admins can write a post
  canWrite: function() {
    return this.get("user.isAdmin");
  }.property("user.isAdmin"),

  // only the person who wrote a post can edit it
  canEdit: function() {
    return this.get("user.id") === this.get("model.author");
  }.property("user.id", "model.author")

});

Handlebars Helpers

There's a {{if-can}} and corresponding {{unless-can}} helper which behave just like their {{if}} and {{unless}} counterparts.

The first parameter is a string which is used to find the ability class call the appropriate property (see "Looking up abilities" below).

The second parameter is an optional model object which will be given to the ability to check permissions.

As activities are standard Ember objects and computed properties if anything changes then the view will automatically update accordingly.

if-can

{{#if-can "edit post" post}}
...
{{else}}
...
{{/if-can}}

unless-can

{{#unless-can "write post"}}
  You cannot write new posts.
{{/unless-can}}

Additional attributes

If you need more than a single resource in an ability, you can pass them additional attributes.

You can do this in the helpers, for example this will set the model to project as usual, but also member as a bound property.

{{#if-can "remove member from project" project member=member}}
...
{{/if-can}}

Similarly in routes you can pass additional attributes after or instead of the resource:

  this.can("edit post", post, { author: bob });
  this.can("write post", { project: project });

These will set author and project on the ability respectively so you can use them in the checks.

Looking up abilities

In the example above we said {{#if-can "write post"}}, how do we find the ability class & know which property to use for that?

First we chop off the last word and use the singular version as the resource type.

Then for the ability name we remove some basic stopwords (of, for in) at the end, prepend with "can" and camelCase it all.

For example:

String property resource
write post canWrite /abilities/post.js
manage members in projects canManageMembers /abilities/project.js
view profile for user canViewProfile /abilities/user.js

Current stopwords which are ignored are:

  • for
  • from
  • in
  • of
  • to

Injecting the user

How does the ability know who's logged in? This depends on how you implement it in your app!

If you're using ember-simple-auth, you'll probably want to inject the simple-auth-session:main session into the ability classes.

To do this, edit your app's /config/environment.js like so:

ENV["ember-can"] = {
  "inject": {
    "session": "simple-auth-session:main"
  }
};

The ability classes will now have access to session which can then be used to check if the user is logged in etc...

Controllers, components & computed properties

In a controller or component, you may want to expose abilities as computed properties so that you can bind to them in your templates.

To do that there's a helper to lookup the ability for a resource, which you can then alias properties:

import { computed } from 'ember-can';
import Ember from 'ember';

export default Ember.Controller.extend({
  post: null, // set by the router

  // looks up the "post" ability and sets the model as the controller's "post" property
  ability: computed.ability("post"),

  // alias properties to the ability for easier access
  canEditPost: Ember.computed.alias("ability", "canEdit")
});

computed.ability assumes that the property for the resource is the same as the ability resource. If that's not the case, include it as the second parameter.

For example, in an ObjectController we probably want to use the content:

import { computed } from 'ember-can';
import Ember from 'ember';

export default Ember.ObjectController.extend({
  // looks up the "post" ability and sets the model as the controller's "content" property
  ability: computed.ability("post", "content")
});

Development

Installation

  • git clone this repository
  • npm install
  • bower install

Running

Running Tests

  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

ember-can's People

Contributors

ember-tomster avatar karlguillotte avatar rlivsey avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.