Vue--권한 시스템 만들기

저자 자술:
다중 페이지 Vue 항목에서 권한 일치를 우아하게 하는 방법
문제점 해결:
복잡한 신분 판단 - 일상 개발에서 ||| & & & & 로 신분 검증을 통해 DOM의 숨겨진 업무 논리적 상호작용을 처리한다새로운 신분을 추가하려면 이전의 논리를 모두 재현 처리해야 한다의존성:
정규 표현식Array.filter 클로즈업생각을 실현하다

업무 사전 항목 만들기(업무 기능 수준에 따라 연결하기 요구)

신분 사전 항목 만들기(후기 확장 및 유지보수)

신분 권한 규칙 사전 항목 만들기(각 신분에 대해 특정 규칙 설정)

사전 항목 초기화, 신분 입력, 특정 사전 항목 출력

글로벌 메서드 정의

코드:

(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)
    }
}