Vue 사용자 정의 v-has 명령, 단추 권한 판단을 하려면

응용 장면

백그라운드 관리 시스템의 경우 사용자마다 버튼 권한이 다릅니다.관리자가 권한을 설정한 후 사용자가 로그인할 때 인터페이스에서 단추 권한 목록을 가져와 백그라운드 데이터에 따라 어떤 단추를 표시할지 판단한다.

간단히 말하면, 사용자 정의 지령

Vue.js 홈페이지 사용자 정의 지령에 대한 설명
cn.vuejs.org/v2/guide/cu…

기초 개념

Vue는 핵심 기능이 기본적으로 내장된 명령어 (v-model과 v-show) 를 제외하고 사용자 정의 명령어를 등록할 수 있습니다.
Vue2.0에서 코드 복용과 추상적인 주요 형식은 구성 요소이다.그러나 일반 DOM 요소에 대한 기본 작업이 필요한 경우도 있습니다. 이때 사용자 정의 명령이 사용됩니다.
예를 들어 v-focus 명령을 사용자 정의하면 페이지가 불러올 때 입력 상자에 초점을 맞출 수 있습니다

<input v-focus>

전역 사용자 정의

//   `v-focus`
Vue.directive('focus', {
  //   DOM  ……
  inserted: function (el) {
    //  
    el.focus()
  }
})

로컬 사용자 정의

// ，  directives  ：
directives: {
  focus: {
    //  
    inserted: function (el) {
      el.focus()
    }
  }
}

갈고리 함수

명령 정의 대상은 다음과 같은 몇 개의 갈고리 함수를 제공할 수 있습니다 (선택 사항입니다)
bind
한 번만 호출합니다. 명령을 원소에 처음 연결할 때 호출합니다.여기서 일회용 초기화 설정을 할 수 있습니다.
inserted
바인딩 요소가 부모 노드에 삽입될 때 호출됨 (부모 노드만 존재하지만 문서에 삽입된 것은 아님)
update
구성 요소의 VNode가 업데이트될 때 호출되지만 하위 VNode가 업데이트되기 전에 발생할 수 있습니다.명령의 값이 바뀔 수도 있고 없을 수도 있습니다.그러나 업데이트 전후의 값을 비교하여 불필요한 템플릿 업데이트를 무시할 수 있습니다.
componentUpdated
명령이 있는 구성 요소의 VNode와 하위 VNode를 모두 업데이트한 후 호출합니다.
unbind
한 번만 호출합니다. 명령과 원소가 묶일 때 호출합니다.

기타

이외에도 기초 개념, 갈고리 함수 파라미터, 동적 지령 파라미터 등이 있다.
cn.vuejs.org/v2/guide/cu…
홈페이지에서 분명하게 말했기 때문에 여기서 더 이상 군더더기를 하지 않겠다.

원리

만약 사용자 정의 지령의 원본에 흥미가 있다면, 또한 한 편의 문장은 매우 철저하게 이야기할 것이다
//www.jb51.net/article/209716.htm
원리는 다음과 같다.

Vue의 속성을 해석할 때 각 속성을 반복합니다

대상에directives 속성 저장 명령 정보를 추가합니다

렌더링이 완료되면directives 모듈의create 갈고리 함수를 실행합니다

Vue 컴파일로 생성된 가상 노드, 즉 VNode가 부모 노드에 삽입된 후

모든 함수를 순서대로 실행하면 우리가 정의한 inserted 갈고리 함수까지 실행됩니다

사용자 정의 명령 v-has

말은 귀찮게 하지 말고 본론으로 돌아가라.
오늘은 주로 요약: 사용자 정의 지령 v-has, 단추 권한 판단
로그인 인터페이스에서 버튼 권한 목록을 가져와 로컬 캐시 LOGIN_ 저장USER_BUTTON_AUTH 중
데이터 형식은 다음과 같습니다.

[
    {
        "checked":false,
        "component":"",
        "createTime":"2019-06-29 18:21:06",
        "createUser":"026a564bbfd84861ac4b65393644beef",
        "icon":"",
        "id":"1503273153861066776",
        "name":" （ ）",
        "open":"true",
        "parentId":"2328050996633395469",
        "parentName":" ",
        "permission":"sys:index:vol",
        "sort":103,
        "status":"0",
        "type":"2",
        "updateTime":"2021-01-27 15:51:15",
        "updateUser":"026a564bbfd84861ac4b65393644beef",
        "url":""
    }
]

사용자 정의 v-has 명령 설정
utils 폴더 아래에 hasPermission을 새로 만듭니다.js 파일, index에 있습니다.js에서 일괄 내보내기

const hasPermission = {
    install (Vue, options) {
        Vue.directive('has', {
            inserted: (el, binding, vnode)=>{
                filterGlobalPermission(el, binding, vnode);
            }
        });
    }
};
/**
 *  
 */
export const filterGlobalPermission = (el, binding, vnode) => {
    let permissionList = [];
    let authList = JSON.parse(localStorage.getItem('LOGIN_USER_BUTTON_AUTH') || "[]");
    for (let auth of authList) {
        permissionList.push(auth);
    }
    if (!permissionList.length) {
        el.parentNode.removeChild(el);
        return;
    }
    let permissions = [];
    for (let item of permissionList) {
        permissions.push(item.permission);
    }
    if (!permissions.includes(binding.value)) {
        el.parentNode.removeChild(el);
    }
}
export default hasPermission;

utils 파일 아래의 index.js

utils 폴더 아래의 다른 js 파일도 index에 통일할 수 있습니다.js에서 내보내기

import hasPermission from './hasPermission'
export { hasPermission }

main.js에서 도입

import { hasPermission } from '@/utils'
Vue.use(hasPermission)

구성 요소에서 v-has를 사용하여 단추 권한에 따라 단추를 표시할지 여부를 판단합니다

<el-button v-has="'sys:arch:add'" type="primary" size="mini" icon="el-icon-plus" @click="add('1')">
     
</el-button>

이상은 바로 Vue 사용자 정의 v-has 지령입니다. 단추 권한 판단을 하는 절차의 상세한 내용입니다. 더 많은 Vue 사용자 정의 v-has 지령에 대한 자료는 저희 다른 관련 글을 주목해 주십시오!