Introduction
vue access control is base on the package @lywzx/access.control for vue application access control.
Getting Started
Installation
# install
yarn add @lywzx/vue.access.control # or：npm install @lywzx/vue.access.control --save
When used with a module system, you must explicitly install VueAccessControl via Vue.use();
import VueAccessControl from '@lywzx/vue.access.control';
Vue.use(VueAccessControl, {});
You don't need to do this when using global script tags.
Dev Build
You will have to clone directly from GitHub and build vue.access.control yourself if you want to use the latest dev build.
git clone https://github.com/lywzx/vue.access.control.git node_modules/@lywax/vue.access.control
cd node_modules/@lywax/vue.access.control
npm install
npm run build
use examples
after you correct install. you should new a AccessControl.
// src/access/index.js
import VueAccessControl, {
LoginMiddleware,
RouterMiddleware
} from '@lywzx/vue.access.control';
import Vue from 'vue';
Vue.use(VueAccessControl);
const access = new VueAccessControl();
export default access;
then you change root vue component.
// src/main.js
import access from './access/index';
new Vue({
access
}).$mount('#app')
in you component, $access variable you will visited.
check role or permission
<!-- check role -->
<div v-if="$access.hasRole('administrator')"></div>
<!-- check permission -->
<div v-if="$access.can('edit_post')"></div>
route middleware
if you has used vue-router, you may need router middleware for you application. When you use VueAccessControl, please enable useRouter.
Vue.use(VueAccessControl, {
vueRouter: true
});
the code should below Vue.use(vueRouter)
add these code to you router
import VueRouter from 'vue-router';
import { afterEach, beforeEach } from '@lywzx/vue.access.control';
//...
const Router = new VueRouter({
// ...
});
// add code like this
Router.beforeEach(beforeEach.bind(Router));
Router.afterEach(afterEach.bind(Router));
if user must login when visit the page, you can do like this.
{
name: 'user_index',
path: 'user/index',
meta: {
middleware: ['login']
}
}
only administrator can access
{
name: 'user_manage',
path: 'admin/user',
meta: {
middleware: ['login', 'role:administrator']
}
}