@sfit/vue-permission-plugin NPM

vue-permission-plugin

基于vue框架的权限指令插件。

可用指令

v-confirm v-create v-delete v-modify v-read v-reject v-verify v-publish v-apply

可用属性

canConfirm canCreate canDelete canModify canRead canReject canVerify canPublish canApply

Vue2.x 使用方式

import Vue from 'vue';
import VuePermissionPlugin from '@sfit/vue-permission-plugin';
Vue.use(VuePermissionPlugin, {
  permissions: { 
    'index': ['R','U'],
  },
  routeMapFunction:(route) => route.path,
})

<template>
  <el-button v-read>我是需要读权限才会显示的Button</el-button>
</template>

<script type="ts">
  created() {
    if(this.canRead) {
      // 我是一个需要读权限才会执行的方法
      getDataFromServer().then(() => { })
    }
  }
</script>

Vue3.x 使用方式

import { createApp } from "vue";
import VuePermissionPlugin from '@sfit/vue-permission-plugin';
app.use(VuePermissionPlugin, {
  permissions: { 
    'index': ['R','U'],
  },
  routeMapFunction:(route) => route.path,
})

<template>
  <el-button v-read>我是需要读权限才会显示的Button</el-button>
</template>

<script type="ts">
  setup() {
    const { canRead } = usePermission();
    if(canRead) {
      // 我是一个需要读权限才会执行的方法
      getDataFromServer().then(() => { })
    }
  }
</script>

初始化参数说明

`permissions` 权限信息（必传参数）

权限验证的核心参数，必须传入。

该对象为Json类型，key是路由的path，value是该path的权限集合。权限集合应符合uapp框架的ACL定义，如需拓展，请配合ACL一起使用。

如果你是使用Ipc方式从Angular层获取的permissions，因为Angular层返回的perimissions的key并不一定能够和当前Vue实例的route.path对应起来，所以你可能需要预先将permissions的key映射为正确的path，或通过传入mapRouteFunction参数来帮助插件正确的将route.path转换为你在Angular中定义的key。