[![NPM version][npm-image]][npm-url] [![NPM download][download-image]][download-url] [](https://github.com/casbin-js/vue-authz/actions/workflows/ci.yml) [

[npm-image]: https://img.shields.io/npm/v/vue-authz.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/vue-authz
[download-image]: https://img.shields.io/npm/dm/vue-authz.svg?style=flat-square
[download-url]: https://www.npmjs.com/package/vue-authz
This package allows you to integrate Casbin.js (An authorization library) with
your Vue 3 application.
``bash`
npm install vue-authzor
yarn add vue-authzor
pnpm add vue-authz
This package provides a Vue plugin, several hooks for
new Vue Composition API
`typescript
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.
`vue
v-if='$can("read","post")'
>
Post content.
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.`typescript
createApp()
.use(CasbinPlugin, authorizer)
.mount('#app');
`And inject it with
AUTHORIZER_KEY`vue
Post content.
`You can also use
useAuthorizer function.`vue
Post content.
``This project is licensed under the Apache 2.0 license.
If you have any issues or feature requests, please contact us. PR is welcomed.
- https://github.com/casbin-js/vue-authz/issues
- hsluoyz@gmail.com
- Tencent QQ group: 546057381