vue2-permission

说明

该插件用于权限控制，根据不同的权限，显示不同的控件，常用于页面中按钮级别的权限控制，也可以用于数据表格权限的控制

安装

yarn add vue2-permission
// or
npm install vue2-permission --save

使用教程

使用指令模式

import { vuePermission } from 'vue2-permission';
Vue.use(vuePermission, {
  // 配置权限，默认从路由中读取
  permissions: ['select', 'delete', 'create', 'insert', 'upload', 'download'],
});

在vue文件中使用

<HelloWorld msg="Welcome to Your Vue.js App" v-permission.select />

使用组件模式

import { VuePermission } from 'vue2-permission';
Vue.component(VuePermission);

<VuePermission :permissions="permissions" :all-permissions="allPermissions">
  <HelloWorld msg="Welcome to Your Vue.js App" />
</VuePermission>

export default {
  name: 'App',
  data() {
      return {
        permissions: ['select'], // 当前需要的权限
        allPermissions: ['select', 'delete', 'create', 'insert', 'upload', 'download'], // 当前页面存在的权限
      };
  },
}

注意

该插件只能在vue中使用 基于vue和vue-router 需要在vue-router中配置路由的时候，配置上对应的路由权限

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login,
    meta: {
      permissions: ['select'],
    },
  },
  {
    path: 'home',
    name: 'Home',
    component: Home,
    meta: {
      permissions: ['select', 'create'],
    },
  }
];