CASL load user permissions from API on login

casl-backend-permission-2.js

import { Ability, subject } from "@casl/ability";

const editorRole = { id: 1, name: 'Editor'};
const adminRole = { id: 2, name: 'Admin' };
const user = { id: 1, alias: "jdoe", name: "John Doe", role_id: 1 };

const ability = new Ability();

const rules = [
  {
    action: "view",
    subject: "roles",
    conditions: {
      id: user.role_id
    }
  }
];

ability.update(rules);

console.log("can('view roles')", ability.can("view", "roles"));

console.log(
  "can('view editorRole')",
  ability.can("view", subject("roles", editorRole))
);

console.log(
  "can('view adminRole')",
  ability.can("view", subject("roles", adminRole))
);

casl-backend-permission.js

import { Ability, subject } from "@casl/ability";

const user = { id: 1, alias: "jdoe", name: "John Doe" };
const ownPost = { user_id: user.id };
const otherPost = { user_id: 2 };

const ability = new Ability();

// fetched from API
const rules = [
  {
    action: "view-any",
    subject: "posts"
  },
  {
    action: "view",
    subject: "posts"
  },
  {
    action: "create",
    subject: "posts"
  },
  {
    action: "update",
    subject: "posts",
    conditions: {
      user_id: user.id
    }
  },
  {
    action: "delete",
    subject: "posts",
    conditions: {
      user_id: user.id
    }
  }
];

// update ability with backend permissions
ability.update(rules);

// console.log("can('view-any posts')", ability.can("view-any", "posts"));
// console.log("can('view posts')", ability.can("view", "posts"));
// console.log("can('create posts')", ability.can("create", "posts"));
// console.log("can('update posts')", ability.can("update", "posts"));
console.log("can('delete posts')", ability.can("delete", "posts"));

console.log(
  "can('delete ownPost')",
  ability.can("delete", subject("posts", ownPost))
);

console.log(
  "can('delete otherPost')",
  ability.can("delete", subject("posts", otherPost))
);

Vue Gates

A simpler implementation with Laravel Spatie permission example.