Skip to content
Example of CASL and Aurelia integration
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
aurelia_project
src
static
test
.babelrc
.babelrc.js
.editorconfig
.eslintrc.json
.gitignore
README.md
favicon.ico
index.ejs
jsconfig.json
package-lock.json
package-scripts.js
package.json
webpack.config.js

README.md

CASL and Aurelia integration

Read CASL in Aurelia app for details.

  • CASL is an isomorphic authorization JavaScript library which restricts what resources a given user is allowed to access
  • Aurelia is a JavaScript client framework for mobile, desktop and web leveraging simple conventions and empowering creativity. The main benefit of Aurealia is that resulting code is highly portable and testable, it's easy to read and support.
  • js-data is a framework-agnostic, datastore-agnostic JavaScript ORM built for ease of use and peace of mind. Works in Node.js and in the Browser.

This blog application shows how to integrate CASL in Aurelia based application. Application uses standard aurelia cli setup with minor changes:

  • all custom elements and attributes are in src/components folder
  • value converters are in src/pipes
  • bootstrap component is in src/components/root folder

Note: refactored to use CASL 2.0. See @casl/ability and @casl/aurelia for details.

Installation

First of all, you need to install Aurelia CLI

npm install -g aurelia-cli

then clone this repository and run:

npm install
au run --watch

Now you can open http://localhost:9000 to see application.

Configuration

  • js-data mappers configuration can be found at src/config/store
  • Session is fetched for each page reload at src/config/session

To see application without CASL integration, checkout to without-casl branch.

Abilities

All abilities are defined in src/config/abilities and updated each time a new Session is created, found or destroyed (i.e., when user log in or log out). Application uses can value convertor with if binding:

<li if.bind="'Post' | can: 'create'">
  <a route-href="route: newPost">Add Post</a>
</li>

In this case if user has ability to create posts, he will see the button, otherwise button will be removed. For more information about value convertors please refer to Aurealia documentation

You can’t perform that action at this time.