vuejs插件_VueJS 2的访问控制列表插件

vuejs插件

Vue JS 2中的访问控制列表插件 (Plugin of Access Control List from Vue JS 2)

This plugin aims to control the layout of the system and block access to certain routes of the vue-router, that according to the current active permission on the system.

该插件旨在控制系统的布局，并根据当前对系统的活动许可来阻止访问vue-router的某些路由。

依存关系： (Dependencies:)

• VueJS version 2

  VueJS版本2

• vue-router

  Vue路由器

安装 (Installation)

We have two methods of installed, you can use the npm or a standalone.

我们有两种安装方法，您可以使用npm或独立安装。

使用NPM安装 (To install with NPM)

Use the following command to install as dependency:

使用以下命令作为依赖项安装：

npm install vue-acl --save

对于独立安装 (For standalone installation)

To install just copy the file src/es6.js to your plugins directory.

要安装，只需将文件src/es6.js复制到您的插件目录即可。

开始使用： (Get Started:)

[1]: Import the plugin and register it on VueJS, it is necessary to send as a parameter the vue router-router and the default system permission:

[1]：导入插件并在VueJS上注册，必须将vue router-router和默认系统权限作为参数发送：

import Router from '../routes/router'
import Acl from 'vue-acl'
Vue.use( Acl, { router: Router, init: 'any' } )

[2]: Add metadata in their routes saying which permission, or group of permissions is required to access the route, use pipe (|) to do an OR check for more than one permission, use (&) to do an AND check for multiple permissions (these can be used in combination for more complex situations). Use the ' fail ' metadata to indicate which route to redirect on error:

[2]：在其路由中添加元数据，以说明访问该路由需要哪个权限或一组权限，使用管道(|)进行“或”检查是否有多个权限，使用(＆)进行“与”检查多个权限(可以在更复杂的情况下结合使用)。 使用“ fail”元数据来指示发生错误时重定向的路由：

[
  {
    path: '/',
    component: require('./components/Public.vue'),
    meta: {
      permission: 'admin|any',
      fail: '/error'
    }
  },
  {
    path: '/manager',
    component: require('./components/Manager.vue'),
    meta: {
      permission: 'admin',
      fail: '/error'
    }
  },
  {
    path: '/client',
    component: require('./components/Client.vue'),
    meta: {
      permission: 'any',
      fail: '/error'
    }
  },
  {
    path: '/edit-delete',
    component: require('./components/EditDelete.vue'),
    meta: {permission: 'edit&delete', fail: '/error'}
  },
  {
    path: '/edit-delete-admin',
    component: require('./components/EditDeleteAdmin.vue'),
    meta: {permission: 'edit&delete|admin', fail: '/error'}
  },
  {
    path: '/error',
    component: require('./components/Error.vue'),
    meta: {
      permission: 'admin|any'
    }
  },
]

[3]: The components use the global method $can() to verify that the system gives access to permission passed by parameter:

[3]：组件使用全局方法$can()来验证系统是否允许访问由参数传递的权限：

<router-link v-show='$can("any")' to='/client'>To client</router-link> |
<router-link v-show='$can("admin")' to='/manager'>To manager</router-link> |
<router-link v-show='$can("admin|any")' to='/'>To Public</router-link>
<router-link v-show='$can("edit&delete")' to='/'>To Edit and delete</router-link>

This method receives a parameter with the permissions to check, separated by a pipe (|) or ampersand (&), and returns a bool saying if permission has been granted.

此方法接收一个具有检查许可权的参数，并用竖线(|)或与号(＆)分隔，并返回bool说明是否已授予许可权。

To change the current system permission use the global method $access(), passing as parameter the new permission, or array of permissions:

要更改当前系统权限，请使用全局方法$access() ，将新权限或权限数组作为参数传递：

this.$access('admin')

or:

要么：

this.$access(['edit', 'delete'])

or with & operator:

或与＆运算符：

this.$access('edit&delete')

To see the current system permission, just call the $access() method with no parameter.

要查看当前的系统权限，只需调用不带参数的$access()方法。

翻译自: https://vuejsexamples.com/access-control-list-plugin-for-vuejs-2/

vuejs插件