Vue——打造权限系统

作者自述：

在多页面Vue项目中，如何优雅的的进行权限匹配

解决痛点：

• 复杂的身份判断 —— 在日常开发中经常用 || && 来进行身份验证从而处理DOM的显隐已经业务逻辑的交互
• 添加新身份以往的逻辑全部需要重现处理

依赖：

• 正则表达式
• Array.filter
• 闭包

实现思路

1. 创建业务字典项（要求按照业务功能级别拼接）
2. 创建身份字典项（后期扩展和维护）
3. 创建身份权限规则字典项（为每一种身份，配置特定规则）
4. 初始化字典项，输入身份，输出特定字典项
5. 定义全局方法

代码：

(function (window) {
  var u = {};
  var ROOT = [];

  var isAndroid = (/android/gi).test(navigator.appVersion);
  var uzStorage = function () {
    var ls = window.localStorage;
    if (isAndroid) {
      ls = os.localStorage();
    }
    return ls;
  };

  // 祛除全部空格
  u.trimAll = function (str) {
    return str.replace(/\s*/g, '');
  };

  u.setStorage = function (key, value) {
    if (arguments.length === 2) {
      var v = value;
      if (typeof v == 'object') {
        v = JSON.stringify(v);
        v = 'obj-' + v;
      } else {
        v = 'str-' + v;
      }
      var ls = uzStorage();
      if (ls) {
        ls.setItem(key, v);
      }
    }
  };
  u.getStorage = function (key) {
    var ls = uzStorage();
    if (ls) {
      var v = ls.getItem(key);
      if (!v) {
        return;
      }
      if (v.indexOf('obj-') === 0) {
        v = v.slice(4);
        return JSON.parse(v);
      } else if (v.indexOf('str-') === 0) {
        return v.slice(4);
      }
    }
  };
  u.rmStorage = function (key) {
    var ls = uzStorage();
    if (ls && key) {
      ls.removeItem(key);
    }
  };

  u.root = [ // 定义身份
    'shiju',
    'fenju',
    'paichusuo'
  ];

  u.regex = { // 为身份定义规则
    shiju: /^home_hospital_[^(r)]+|^home_hospital_room/, // 匹配以home_hospital_开头，但是下一位不能使r和home_hospital_room
    fenju: /^home_hospital_/,
    paichusuo: /^user__/,
  };

  // 定义数组
  u.root_list = [
    'home_hospital_room', // 警务室检查
  ];

  u.init = function (root) {
    if (!root) {
      console.warn('请传入身份');
      return;
    }
    if (u.root.indexOf(root) == -1) {
      console.warn('此身份不在权限库中');
      return;
    }
    u.ROOT = u.root_list.filter(function (item) {
      item = u.trimAll(item);
      return u.regex[root].test(item);
    });
    u.setStorage('ROOT', u.ROOT);
  };

  u.destroy = function () {
    u.ROOT = {};
    u.rmStorage('ROOT');
  };

  u.check = function (item) {
    if (!u.ROOT && !u.getStorage('ROOT')) {
      console.warn('请初始化权限');
      return;
    }
    var ROOT = u.ROOT || u.getStorage('ROOT');
    return ROOT.indexOf(item) !== -1;
  };

  /*end*/


  window.$root = u;

})(window);

初始化数组

$root.init('shiju')

v-show判断数组中是否有

v-show="root_check('home_hospital_room')"

methods: {
    root_check (item) {
        return $root.check(item)
    }
}