uni-perms-loader

简介

一个 webpack 自定义 loader，用于 uni-app 自定义指令 v-perms:xxx 转 v-if="$perms('xxx')"，让 uni-app 具有自定义指令开发体验实现按钮权限。

安装依赖

npm 方式

npm i -D @lbingxin/uni-perms-loader

yarn 方式

yarn add @lbingxin/uni-perms-loader -D

使用方式

vue.config.js 配置

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

按钮权限判断方式实现

// src/utils/index.js

// 这边是假数据，不同团队对于权限的数据定义都不大一样，我列举的算是最简单的一种，不大需要
// 去考虑不同页面按钮名称重复，用当前页面路由进行区分
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/index
  const { route } = pages[len - 1];
  // 判断当前页面是否包含对应按钮的权限
  return !!data[`/${route}`][key];
};
export default checkPermission;

$perms 方法挂载

// main.js

// 将实现按钮权限判断的函数挂载到全局的$perms上

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