Frontend Tips 3 — Authorizing your applications

Frontend Tips 3 — Authorizing your applications

In this tip I want to share how I like to authorize any Single Page Application using frameworks like Angular, React or Vue or without any framework.

To do that I’ve been working with the same library in some projects of the last year, and this library is CASL, a really simple library to manage permissions in any JavaScript or TypeScript application.

Introducing CASL

They define theirselves with four important features, first is a versatile library is really simple and can be used in small or large projects, the idea is to don’t automatize everything but made it fully customizable.

Is an isomorphic package, can be used in frontend or backend (with node) and works with the most common frameworks.

Created with TypeScript it makes it a type safe project, but you can also use it without TS if you want.

They made the project thinking in three shaking and all the parts are in different packages that you can import as you need.

Finally, they define the library as declarative and for me is really readable, you can easily understand what is happening all the time.

Configuring the abilities

Usually I like to explain the functionality and after that show the example, but in that case I have found their example simple enough to show it before.

import { AbilityBuilder, Ability } from '@casl/ability'
import { User } from '../models'; // application specific interfaces
* @param user contains details about logged in user: its id, name, email, etc
function defineAbilitiesFor(user: User) {
const { can, cannot, rules } = new AbilityBuilder();
// can read blog posts
can('read', 'BlogPost');
// can manage (i.e., do anything) own posts
can('manage', 'BlogPost', { author: });
// cannot delete a post if it was created more than a day ago
cannot('delete', 'BlogPost', {
createdAt: { $lt: - 24 * 60 * 60 * 1000 }
return new Ability(rules);

We have created a function called defineAbilitiesFor where we receive the current user.

First we define that this (and all the users) can read the blog posts, also will be able to manage the blogpost where the author id is the same as the current user id and finally nobody will be able to delete the posts created one month ago.

On the one hand is interesting that you can use any word that you like for determine the abilities, on the other hand we usually define CRUD rules like read, create, update or delete and manage that means everything.

That’s all we have our abilities configured.

Checking abilities without frameworks

If we don’t want to use frameworks we have only to call to the defined function and call to can method.

const ability = defineAbilitiesFor(user);
ability.can('read', 'BlogPost');
// or
ability.can('read', BlogPost);
// also with properties
ability.can('manage', new BlogPost({ author: }));

Checking abilities with frameworks

Without frameworks is not difficult but with them is exciting, you can use the Component <Can> and choose if something is going to be rendered or not.

<Can I="read" a="BlogPost">
You are not allowed to read a post
giphy it’s magic

A real example

In a real world I don’t want to use magic strings, you can see an example of this in Xabaril/Esquio version 2.0 created with TypeScript and Vue.

Xabaril Esquio example

You can check the repo in Github.

Breaking projects at @PlainConcepts during day. Dreaming at @HelpDev_ , streaming at @JavascriptIO and learning at @NeedU_org over the night • Web GDE

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store