前端自定义权限

Installation

# npm install --save easy-permission

Usage

vuex相关方法和指令v-permission注入

1.初始化

import EasyPermission from 'easy-permission';
import adminRouter from '@/router/maps/admin';

Vue.use(EasyPermission, {
  appRouter: router,  // vue-router路由实例对象
  routerConfig: adminRouter // 需要权限控制的路由配置
});

2.vuex状态管理

3.directive指令

指令根据当前调用页面的路由判断是否有权限

A. v-permission 默认指令，对元素添加样式名 v-permission-disabled 默认样式

.v-permission-disabled { 
  opacity:.5 !important;
  cursor:not-allowed !important;
}

设置元素属性

vnode.elm.disabled = true;
vnode.elm.onclick = null;

B. v-permission:display 添加参数 display 无权限时将隐藏当前元素

vnode.elm.style.display = 'none';

遍历脚本配置

1.初始化配置

# node node_modules/easy-permission/dist/index.js init

执行成功会在当前执行路径下生成文件夹.permission

-.permission
  - config.json
  - terminal.log

2.执行遍历脚本

# node node_modules/easy-permission/dist/index.js traversal

执行成功会在.permission文件夹下新增文件，其中ep.json为最终menuId与接口匹配数据结果数据。

-.permission
  - ep.api.json
  - ep.router.json
  - ep.json