https://github.com/casbin-js/vue-authz
Vue 2 & 3 wrapper for Casbin.js
https://github.com/casbin-js/vue-authz
abac acl auth casbin casbinjs js rbac vue vue2 vue3
Last synced: 8 months ago
JSON representation
Vue 2 & 3 wrapper for Casbin.js
- Host: GitHub
- URL: https://github.com/casbin-js/vue-authz
- Owner: casbin-js
- License: apache-2.0
- Created: 2021-03-07T09:52:19.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-09-28T10:07:24.000Z (about 3 years ago)
- Last Synced: 2024-11-15T09:06:16.882Z (11 months ago)
- Topics: abac, acl, auth, casbin, casbinjs, js, rbac, vue, vue2, vue3
- Language: TypeScript
- Homepage: https://github.com/casbin/casbin.js
- Size: 149 KB
- Stars: 26
- Watchers: 4
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-authz
[![NPM version][npm-image]][npm-url]
[![NPM download][download-image]][download-url]
[](https://github.com/casbin-js/vue-authz/actions/workflows/ci.yml)
[](https://codecov.io/gh/casbin-js/vue-authz?branch=master)
[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](https://github.com/casbin/casbin.js) (An authorization library) with
your Vue 3 application.
## Installation
```bash
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](https://v3.vuejs.org/guide/composition-api-introduction.html)
### The plugin
```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
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](https://v3.vuejs.org/guide/component-provide-inject.html) in Vue 3 to get the `$authorizer`.
```typescript
createApp()
.use(CasbinPlugin, authorizer)
.mount('#app');
```
And inject it with `AUTHORIZER_KEY`
```vue
Post content.
import { AUTHORIZER_KEY } from 'vue-authz';
export default {
inject: {
$whatyouwant: { from: AUTHORIZER_KEY }
}
}
```
You can also use `useAuthorizer` function.
```vue
Post content.
import { useAuthorizer } from 'vue-authz';
export default {
setup() {
const { whatyouwant } = useAuthorizer();
return {
whatyouwant
};
}
}
```
## License
This project is licensed under the [Apache 2.0 license](LICENSE).
## Contact
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](//shang.qq.com/wpa/qunwpa?idkey=8ac8b91fc97ace3d383d0035f7aa06f7d670fd8e8d4837347354a31c18fac885)