# @lywzx/vue.access.control

> vue access control

Latest version **1.0.10** (published 2019-07-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lywzx/vue.access.control
pnpm add @lywzx/vue.access.control
yarn add @lywzx/vue.access.control
bun add @lywzx/vue.access.control
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2019-07-11 |
| First published | 2019-05-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 2.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 39 |
| Author | liuyang |
| Maintainers | lywzx |
| Keywords | vue, access, control, acl |

## Links

- npm: https://www.npmjs.com/package/@lywzx/vue.access.control
- Repository: https://github.com/lywzx/vue.access.control
- Homepage: https://github.com/lywzx/vue.access.control#readme
- Issues: https://github.com/lywzx/vue.access.control/issues
- npm.io page: https://npm.io/package/@lywzx/vue.access.control

## Recent versions

- 1.0.10 (latest) — 2019-07-11
- 1.0.9 — 2019-07-02
- 1.0.8 — 2019-06-13
- 1.0.7 — 2019-06-12
- 1.0.6 — 2019-06-11
- 1.0.5 — 2019-06-04
- 1.0.4 — 2019-05-30
- 1.0.3 — 2019-05-29
- 1.0.2 — 2019-05-23
- 1.0.1 — 2019-05-22
- 1.0.0 — 2019-05-18

## README

# Introduction

`vue access control` is base on the package  [`@lywzx/access.control`](https://github.com/lywzx/access.control) for vue application access control.


# Getting Started

## Installation

```sh
# 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()`;

```js
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.

```sh
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.

```js
// 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.

```js
// 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

```html
<!-- 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.

```js
Vue.use(VueAccessControl, {
    vueRouter: true
});
```
   
the code should below `Vue.use(vueRouter)`
   
add these code to you router

```js
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.

```js
{
    name: 'user_index',
    path: 'user/index',
    meta: {
        middleware: ['login']
    }
}
```

only administrator can access

```js
{
    name: 'user_manage',
    path: 'admin/user',
    meta: {
        middleware: ['login', 'role:administrator']
    }
}
```

# Examples preview

[base access](https://www.lyblog.net/docs/vue.access.control/demo/base/index.html)

[route middleware](https://www.lyblog.net/docs/vue.access.control/demo/route-middleware/index.html)

# Examples codes

[base access](https://github.com/lywzx/vue.access.control/tree/dev/examples/base)

[route middleware](https://github.com/lywzx/vue.access.control/tree/dev/examples/route-middleware)

---
_Source: https://npm.io/package/@lywzx/vue.access.control · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._