vue-authz

This package allows you to integrate Casbin.js (An authorization library) with your Vue 3 application.

Installation

npm install vue-authz
# or
yarn add vue-authz
# or
pnpm add vue-authz

Getting started

This package provides a Vue plugin, several hooks for new Vue Composition API

The plugin

import { createApp } from 'vue';
import CasbinPlugin from 'vue-authz';
import { Authorizer } from 'casbin.js';

const permission = {
    "read": ['data1', 'data2'],
    "write": ['data1']
}

// Run casbin.js in manual mode, which requires you to set the permission manually.
const authorizer = new casbinjs.Authorizer("manual");

authorizer.setPermission(permission);

createApp()
    .use(CasbinPlugin, authorizer, {
        useGlobalProperties: true
    }).mount('#app');

After that, you can use $authorizer and $can in every component.

<template>
    <p
        v-if='$can("read","post")'
    >
        Post content.
    </p>
</template>

useGlobalProperties will mount $can and $authorizer on every component. Sometimes, you may want to use some other function as $can. In this condition, you can use provide/inject API in Vue 3 to get the $authorizer.

createApp()
    .use(CasbinPlugin, authorizer)
    .mount('#app');

And inject it with AUTHORIZER_KEY

<template>
    <p v-if="$whatyouwant.can('read', 'Post')">
        Post content.
    </p>
</template>

<script>
import { AUTHORIZER_KEY } from 'vue-authz';

export default {
    inject: {
        $whatyouwant: { from: AUTHORIZER_KEY }
    }
}
</script>

You can also use useAuthorizer function.

<template>
    <p v-if="whatyouwant.can('read', 'Post')">
        Post content.
    </p>
</template>

<script>
import { useAuthorizer } from 'vue-authz';

export default {
    setup() {
        const { whatyouwant } = useAuthorizer();
        return {
            whatyouwant
        };
    }
}
</script>