uni-app跨端自定义指令实现按钮权限操作

// vue.config.js
module.exports = {chainWebpack: config => {// GraphQL Loaderconfig.module.rule('graphql').test(/.graphql$/).use('graphql-tag/loader').loader('graphql-tag/loader').end()}
} 

/v-perms:([^/<>\s]*)/g 

// 结尾是">"
<button v-perms:add>新增按钮</button>
// 结尾是"/"
<input v-perms:add/>
// 结尾是空格
<button v-perms:add class="btn">新增按钮 v-perms:add</button>
// 结尾是"<"
<button>新增按钮 v-perms:add</button> 

npm link 

npm link packageName 

npm unlink packageName 

// source入参就是我们配置的对应规则匹配到文件类型的文件流或者上一个loader处理后的结果。
module.exports = function (source) {return source;
}; 

<u-button type="success" v-perms:edit>编辑</u-button> 

module.exports = function (source) {// TODO// 这里实现对于source的操作return source;
}; 

module.exports = function (source) {// TODO// 这里实现对于source的操作return source;
}; 

// vue.config.js
module.exports = {configureWebpack: {resolveLoader: {// 配置loader可以从node_modules和loaders目录下查找modules: ["node_modules", "./loaders/"],},},// 为.vue文件新增一个uni-perms-loader的loaderchainWebpack: (config) => {config.module.rule("vue").test(/\.vue$/).use("uni-perms-loader").loader("uni-perms-loader").end();},
}; 

{"name": "uni-perms-loader", // 包名"version": "1.0.0", // 版本号"description": "uni-app 自定义权限指令替换", // 介绍"main": "index.js", // 入口"scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keyWords": [ // npm包搜索关键词"uni-app","自定义指令","directive"],"author": "LBINGXIN","license": "MIT" // 开源协议
} 

// vue.config.js
module.exports = {// 为.vue文件新增一个uni-perms-loader的loaderchainWebpack: (config) => {config.module.rule("vue").test(/\.vue$/).use("uni-perms-loader").loader("uni-perms-loader").end();},
}; 

function replaceDirective(source) {// 正则表达式const reg = /v-perms:([^/<>\s]*)/g;// 使用replace实现字符串替换// 这边的$n就是指捕获组()匹配的内容，索引是从1开始，我们这边只有一个，所以是$1，如果有// 多个，那就是$2，$3source = source.replace(reg, `v-if="$perms('$1')"`);return source;
}
module.exports = function (source) {// 处理替换source = replaceDirective(source);return source;
}; 

// 这边是假数据，不同团队对于权限的数据定义都不大一样，我列举的算是最简单的一种，不大需要
// 去考虑不同页面按钮名称重复，用当前页面路由进行区分
const data = {"/pages/index/index": {add: "新增",edit: "编辑",},"/pages/me/index": {add: "新增",auth: "授权",},
};
const checkPermission = (key) => {// 获取所有路由栈const pages = getCurrentPages();const len = pages.length;// 获取当前页面路由 route的值例如 pages/index/indexconst { route } = pages[len - 1];// 判断当前页面是否包含对应按钮的权限return !!data[`/${route}`][key];
};
export default checkPermission; 

import checkPermission from "./utils/index";
Vue.prototype.$perms = checkPermission; 

import checkPermission from "./utils/index";
Vue.prototype.$perms = checkPermission; 

<template><view class="content"><image class="loGo" src="/static/logo.png"></image><view class="buttons"><u-button type="primary" v-perms:add>新增 </u-button><u-button type="success" v-perms:edit>编辑</u-button><u-button type="error" v-perms:delete>删除</u-button><u-button type="warning" v-perms:auth>授权</u-button></view></view>
</template>