Vue iView Admin 다 차원 제어 권한 단추 표시 (springboot 2. x iview admin vue 전후 단 분리 모델 디자이너 동적 데이터 권한 단추 표시)

홍보 홈 페이지http://xb.exrick.cn

온라인 데모http://xboot.exrick.cn

오픈 소스 Github 주소https://github.com/Exrick/x-boot

개발 문서https://www.kancloud.cn/exrick/xboot/1009234

전체 버 전 가 져 오기http://xpay.exrick.cn/pay?xboot

단추 권한
사용자 작업 권한 목록 을 데이터 구조의 meta 필드 에 저장 하고 전역 명령 을 등록 합 니 다. 처음 렌 더 링 을 할 때 들 어 오 는 매개 변수 가 현재 경로 페이지 권한 목록 에 있 는 지 판단 합 니 다. 존재 하지 않 으 면 이 노드 를 직접 삭제 합 니 다.

동적 경로 JSON 데이터 예제

component: "access/access"
icon: "md-lock"
id: "16392767785668608"
level: 2
name: "access_index"
parentId: "16392452747300864"
path: "index"
permTypes: ["add", "edit", "delete"]
title: "       "

배경 에서 메뉴 데이터 구 조 를 읽 을 때 permTypes 를 저장 합 니 다. 자세 한 내용 은 src/libs/util.js

//       
util.initRouterNode = function (routers, data) {
    ...
     //        
    meta.permTypes = menu.permTypes ? menu.permTypes : null;
    ...
};

전역 명령 구성 요 소 를 정의 하고 페이지 가 노드 를 삭제 할 수 있 는 권한 이 있다 고 판단 합 니 다. 자세 한 내용 은 src/libs/hasPermission.js

const hasPermission = {
    install (Vue, options) {
        Vue.directive('has', {
            inserted (el, binding, vnode) {
                let permTypes = vnode.context.$route.meta.permTypes;
                if (!permTypes.includes(binding.value)) {
                    el.parentNode.removeChild(el);
                }
            }
        });
    }
};

export default hasPermission;

전역 등록 구성 요소, 상세 참조 src/main.js

import  hasPermission  from  '@/libs/hasPermission'

Vue.use(hasPermission);

상기 방식 의 장점: 모든 페이지 는 자신 이 가지 고 있 는 권한 만 처리 하고 대량의 권한 이 없 는 데 이 터 는 단점 을 판단 해 야 한다. 동적 경로 에 있 지 않 은 페이지 노드 는 통제 되 지 않 고 해결 방안: 아래 에서 캐릭터 권한 을 사용 하 는 것 을 볼 수 있다.
역할 권한
원 리 는 대체로 같다. 이 방식 은 권한 통 제 를 세분 화 할 수 는 없 지만 전역 적 으로 직접 사용 할 수 있 고 설정 할 필요 가 없다 는 장점 이 있다.

사용자 가 로그 인 에 성공 한 후 캐릭터 정 보 를 LocalStorage 에 저장 합 니 다. 상세 한 내용 은 src/views/login.vue

this.setStore("roles", roles);

전역 명령 구성 요 소 를 정의 하고 페이지 가 노드 를 삭제 할 수 있 는 권한 이 있다 고 판단 합 니 다. 자세 한 내용 은 src/libs/hasRole.js

import { getStore } from './storage';

const hasRole = {
    install (Vue, options) {
        Vue.directive('hasRole', {
            inserted (el, binding) {
                let roles = getStore("roles");
                if (!roles.includes(binding.value)) {
                    el.parentNode.removeChild(el);
                }
            }
        });
    }
};

export default hasRole;

전역 등록 구성 요소, 상세 참조 src/main.js

import  hasRole  from  '@/libs/hasRole'

Vue.use(hasRole);

넓히다
여러 권한 을 사용 하거나 규칙 을 사용 하려 면 아래 코드 를 참고 하여 사용 하 십시오. 작가 가 사용 하지 않 았 기 때문에 필요 한 자체 가입 코드 가 있 습 니 다.

//            ，     
export const hasPermission = {
  install (Vue) {
    Vue.directive('hasPermission', {
      bind (el, binding, vnode) {
        let permTypes = vnode.context.$route.meta.permTypes;
        let value = binding.value.split(',')
        let flag = true
        for (let v of value) {
          if (!permTypes.includes(v)) {
            flag = false
          }
        }
        if (!flag) {
            el.parentNode.removeChild(el)
        }
      }
    })
  }
}

//           ，     
export const hasNoPermission = {
  install (Vue) {
    Vue.directive('hasNoPermission', {
      bind (el, binding, vnode) {
        let permTypes = vnode.context.$route.meta.permTypes;
        let value = binding.value.split(',')
        let flag = true
        for (let v of value) {
          if (permTypes.includes(v)) {
            flag = false
          }
        }
        if (!flag) {
            el.parentNode.removeChild(el)
        }
      }
    })
  }
}

//              ，      
import { getStore } from './storage';

export const hasAnyPermission = {
  install (Vue) {
    Vue.directive('hasAnyPermission', {
      bind (el, binding, vnode) {
        let permissions = vnode.context.$store.state.account.permissions
        let value = binding.value.split(',')
        let flag = false
        for (let v of value) {
          if (permissions.includes(v)) {
            flag = true
          }
        }
        if (!flag) {
            el.parentNode.removeChild(el)
        }
      }
    })
  }
}

//            ，     
import { getStore } from './storage';

export const hasRole = {
  install (Vue) {
    Vue.directive('hasRole', {
      bind (el, binding, vnode) {
        let roles = getStore("roles");
        let value = binding.value.split(',')
        let flag = true
        for (let v of value) {
          if (!roles.includes(v)) {
            flag = false
          }
        }
        if (!flag) {
            el.parentNode.removeChild(el)
        }
      }
    })
  }
}

//              ，      
export const hasAnyRole = {
  install (Vue) {
    Vue.directive('hasAnyRole', {
      bind (el, binding, vnode) {
        let roles = getStore("roles");
        let value = binding.value.split(',')
        let flag = false
        for (let v of value) {
          if (roles.includes(v)) {
            flag = true
          }
        }
        if (!flag) {
            el.parentNode.removeChild(el)
        }
      }
    })
  }
}

이상 의 방식 으로 예 시 를 사용한다.

<div v-hasPermission="'add','edit'">XBootdiv>
<div v-hasAnyPermission="'add','edit'">XBootdiv>
<div v-hasRole="'ROLE_ADMIN','ROLE_USER'">XBootdiv>
<div v-hasAnyRole="'ROLE_ADMIN','ROLE_USER'">XBootdiv>