CASL 2.0 Released: What’s new?

CASL is an isomorphic authorization JavaScript library which makes permissions management easy.

First time you’ve heard about CASL? You may want to read “What is CASL?”.

I glad to say that CASL 2.0 was released couple days ago and brought several new interesting possibilities on our desk:

Package Refactoring

CASL 2.0 is refactored to monorepo, thanks to lerna project. This allowed me to move out MongoDB related functionality into separate package to decrease core library size.

Currently, minified UMD vesion of CASL takes ~5.2 KB and gzipped ~ 2 KB! It can take even less if you use Webpack with its tree shaking feature (e.g., AbilityBuilder can be completely shaked out).

Core package is now called @casl/ability. MongoDB related functionality was moved to @casl/mongoose. And helper functions were moved to @casl/ability/extra .

Dependencies are kept up to update with help of renovate bot.

CASL occupies Frontend

CASL is now shipped with complementary packages for major frontend frameworks like Vue, React, Angular and Aurelia. This allows to integrate CASL seamlessly into different Single Page Applications.

See details in README for each library:

• @casl/vue mixin
• @casl/react with support for latest React Context API
• @casl/angular module
• @casl/aurelia plugin

Permissions per Field

I didn’t forget about new features :), so now you can define abilities per fields:

This may be useful when you want to allow some users to be able to update product prices and others just to update product information (e.g., meta tags, description, images, etc).

Also it will help to show appropriate form fields in your admin panel (or other views) for different roles (e.g., in Vue component):

Moreover, this feature brings some benefits on backend side. For example, you can collect allowed fields from user abilities and pick only those ones which user is allowed to update:

Examples

All example repositories were updated to use CASL 2.0 and complementary packages:

• CASL and Vue
• CASL and React
• CASL and Angular
• CASL and Aurelia
• CASL and Expressjs
• CASL and Feathersjs

Looking for more?

• See CASL CHANGELOG for details and migration guide;
• See CASL documentation for per field checking and per field rules;
• Follow me on Twitter @sergiy_stotskiy to be up-to-date about CASL changes;
• Join Gitter channel to discuss CASL, request features or ask for help in integration.

If you like CASL, ⭐️ Star it on GitHub and share this article with your friends.