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

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

// 結(jié)尾是">"
<button v-perms:add>新增按鈕</button>
// 結(jié)尾是"/"
<input v-perms:add/>
// 結(jié)尾是空格
<button v-perms:add class="btn">新增按鈕 v-perms:add</button>
// 結(jié)尾是"<"
<button>新增按鈕 v-perms:add</button>

npm link

npm link packageName

npm unlink packageName

// source入?yún)⒕褪俏覀兣渲玫膶?duì)應(yīng)規(guī)則匹配到文件類型的文件流或者上一個(gè)loader處理后的結(jié)果。
module.exports = function (source) {
  return source;
};

<u-button type="success" v-perms:edit>編輯</u-button>

<u-button type="success" v-if="$perms('edit')">編輯</u-button>

module.exports = function (source) {
  // TODO
  // 這里實(shí)現(xiàn)對(duì)于source的操作
  return source;
};

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

{
  "name": "uni-perms-loader", // 包名
  "version": "1.0.0", // 版本號(hào)
  "description": "uni-app 自定義權(quán)限指令替換", // 介紹
  "main": "index.js", // 入口
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [ // npm包搜索關(guān)鍵詞
    "uni-app",
    "自定義指令",
    "directive"
  ],
  "author": "LBINGXIN",
  "license": "MIT" // 開源協(xié)議
}

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

function replaceDirective(source) {
  // 正則表達(dá)式
  const reg = /v-perms:([^/<>\s]*)/g;
  // 使用replace實(shí)現(xiàn)字符串替換
  // 這邊的$n就是指捕獲組()匹配的內(nèi)容，索引是從1開始，我們這邊只有一個(gè)，所以是$1，如果有
  // 多個(gè)，那就是$2，$3
  source = source.replace(reg, `v-if="$perms('$1')"`);
  return source;
}
module.exports = function (source) {
  // 處理替換
  source = replaceDirective(source);
  return source;
};

{
  "name": "uni-perms-loader",
  "version": "1.0.0",
  "description": "uni-app 自定義權(quán)限指令替換",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "uni-app",
    "自定義指令",
    "directive"
  ],
  "author": "LBINGXIN",
  "license": "MIT"
}

// 這邊是假數(shù)據(jù)，不同團(tuán)隊(duì)對(duì)于權(quán)限的數(shù)據(jù)定義都不大一樣，我列舉的算是最簡單的一種，不大需要
// 去考慮不同頁面按鈕名稱重復(fù)，用當(dāng)前頁面路由進(jìn)行區(qū)分
const data = {
  "/pages/index/index": {
    add: "新增",
    edit: "編輯",
  },
  "/pages/me/index": {
    add: "新增",
    auth: "授權(quán)",
  },
};
const checkPermission = (key) => {
  // 獲取所有路由棧
  const pages = getCurrentPages();
  const len = pages.length;
  // 獲取當(dāng)前頁面路由 route的值例如 pages/index/index
  const { route } = pages[len - 1];
  // 判斷當(dāng)前頁面是否包含對(duì)應(yīng)按鈕的權(quán)限
  return !!data[`/${route}`][key];
};
export default 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>授權(quán)</u-button>
    </view>
  </view>
</template>