vue-casbin

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

Installation

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

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-casbin';
import { newEnforcer } from 'casbin';

const enforcer = newEnforcer('model string', 'policy string');

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

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

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

By default, useGlobalProperties will mount $enforcer and $enforce on every component. You can also use provide/inject API in Vue 3 to get the enforcer.

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

And inject it with ENFORCER_KEY

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

<script>
import { ENFORCER_KEY } from 'vue-casbin';

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

You can also use useEnforcer function.

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

<script>
import { useEnforcer } from 'vue-casbin';

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

License

This project is licensed under the Apache 2.0 license.

Contact

If you have any issues or feature requests, please contact us. PR is welcomed.

• https://github.com/casbin-js/vue-casbin/issues
• zxilly@outlook.com
• Tencent QQ group: 546057381