vue-authz
v0.2.0
Published
[![NPM version][npm-image]][npm-url] [![NPM download][download-image]][download-url] [![CI](https://github.com/casbin-js/vue-authz/actions/workflows/ci.yml/badge.svg)](https://github.com/casbin-js/vue-authz/actions/workflows/ci.yml) [![Coverage Status](ht
Downloads
38
Readme
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>
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-authz/issues
- [email protected]
- Tencent QQ group: 546057381